New Location and More Original Content

I’ve been pretty busy for the last few months learning the ropes at my new gig, but it’s been great to be immersed in the technologies I love to work with. I love having the support to blog and share information from the team at AVIO Consulting. I’ve got new content coming up, and working lots of interesting projects that present the opportunity to discover what Oracle technologies can do. I’m looking forward to writing more frequently, and have so many topics I want to cover, so come on over and keep reading, it’s about to get interesting…

http://avioconsulting.com/blog/authors/jeremy-hull

 

 

Advertisements

An ADF Mortal Sin

I am working on a site in SharePoint 2013 currently, in leu of having any ADF work, and spotted an old friend. 

style=”height: 100%;”

I looked around and found a few more and removed them all. It reminded me of the first thing I aways checked when working bugs specific to IE. Frequently I would find someone using the ADF counter part:

inlineStyle=”height:100%”

I can’t think of any case where this is the best solution. I can think of lots of cases where it has broken apps and developers have spent countless hours trying to figure out why they can’t see the content of a panelTabbed. This is definitely one of those things that are not what they seem. An easy way to check is look at the rendered DOM in your browser’s developer tools. If you see the content in the DOM, but not in the IE browser, that is a pretty good indication that you have committed this sin. 

LED Hat Sensors

Occasionally I will post some really off-topic stuff…

Rebuilt control/sensor component of my hat with mic connected to a pot going to a MSEG-7. The other pot I am just using as a rotary encoder basically for controlling LED brightness

Data Sync Across features redux

A few people posted some questions/comments on the previous entry: Automatically synchronizing data across features in ADF Mobile

The sample was simpler than I had intended, but it was Sunday night and I was writing a blog entry, so I cut it short. I added the two items mentioned to the sample, which is at the bottom of this entry. Read on to see what I added, and if it is really necessary to have a LifcycleListener and if Data Controls work the same way, and the updated workspace at the end.

Automatically synchronizing data across features in ADF Mobile

I recently had a telecon with someone at Oracle about some ADF Mobile stuff and had one big revelation that I thought I would share. Since every feature can get a springboard menu item or navigation item by default, it seemed like a natural way to save on development costs. The main issue we ran into was keeping that data synchronized between features. I found out that this does NOT work with data controls. All of my data was bound in data controls, so it really made me chase my tail for quite some time to ensure data currency between my features, ultimately I settled for using a custom menu and fewer features. It was not ideal, and I hope I will get a chance to migrate back to features, and convert my data control to a managed bean.

There are quite a few advantages to using data controls, for DVT, and for easily managing master-detail data, and row currency, but alas, you will have duplicate data in your limited device memory, and have a lot of work to get the right row key set when switching features.

So, there are a few key parts of making this work:

1. Managed Bean must be in the ApplicationController project
2. Each feature must have it’s own LifecycleListener class
3. Managed Bean must be applicationScope
4. Managed Bean must have PropertyChangeSupport

My blog entries have been short lately, but this time of year things seem to slow down and I can take a little more time to walk through the steps required. Keep reading to see how this is done and catch the zipped-up workspace at the bottom…

Deadlines

Wow, just taking a breather from a solid couple weeks of coding day and night on an ADF mobile app that will hopefully hit the app stores around the turn of the year. I will have lots of new material and solutions to common and perhaps not-so-common issues. I know I have a whole stack of functionality that needs to be put into an API.

ADF Mobile Image Navigation Overlay

Working on a project tonight, I wanted to have a control like the carousel, but without all the space wasting. I wanted an image, with some attribute values laid out in a table on top of the image, and I also wanted the left and right halves of the image to be active to navigate through my collection executing the Next and Previous bindings. I added a dashed-red border to show the areas that respond to user input.

I wanted to leverage the standard rendering, but style the resulting DOM to fit my tastes. My page consists of an image followed by two tables, the first contains text overlays, the second contains buttons.

<amx:panelGroupLayout id="pgl1">
            <amx:image id="i1" source="#{pageFlowScope.img}" styleClass="overlay-image"/>
            <amx:tableLayout id="txtOvr" styleClass="overlay" width="100%">
                <amx:rowLayout id="rl1">
                    <amx:cellFormat id="cf1" valign="top" height="100px">
                        <amx:outputText value="outputText1" id="ot2"/>
                    </amx:cellFormat>
                    <amx:cellFormat id="cf2" halign="end" valign="top">
                        <amx:outputText value="outputText2" id="ot3"/>
                    </amx:cellFormat>
                </amx:rowLayout>
                <amx:rowLayout id="rl2">
                    <amx:cellFormat id="cf3" valign="bottom" height="33px">
                        <amx:outputText value="outputText3" id="ot4"/>
                    </amx:cellFormat>
                    <amx:cellFormat id="cf4" valign="bottom" halign="end">
                        <amx:outputText value="outputText4" id="ot5"/>
                    </amx:cellFormat>
                </amx:rowLayout>
            </amx:tableLayout>
            <amx:tableLayout id="actionOvr" styleClass="overlay" width="100%">
                <amx:rowLayout id="rl3">
                    <amx:cellFormat id="cf5" width="50%" height="133px">
                        <amx:commandButton id="cb1" styleClass="prev" action="#{bindings.Previous.execute}"/>
                    </amx:cellFormat>
                    <amx:cellFormat id="cf6" width="50%">
                        <amx:commandButton id="cb2" styleClass="next" action="#{bindings.Next.execute}"/>
                    </amx:cellFormat>
                </amx:rowLayout>
            </amx:tableLayout>
        </amx:panelGroupLayout>

Without styling, the above page would lay out the image and two tables vertically. By adding the skin below, it results in a nice data/navigationMenu overlay.

.overlay-image, 
.overlay, 
.overlay .amx-commandButton {
    display: block; /*normally not cool, but these are pretty specific selectors */
    height: 133px;
    width: 100%;
    border-radius: 0;
}

.overlay {
    position: absolute; /*usually bad news, but this is a specific target */
    top: -133px;
}

.overlay .amx-commandButton {
    background-image: none;
    opacity: 0.7;
    width: 90%;
    height: 120px;
    /* left this visible for demonstration purposes, normally set to none */
    border: 1px dashed red;
}

.overlay .amx-outputText {
    color: white;
    text-shadow: 2px 1px 0px black;
    font-size: 24px;
}

.amx-commandButton.next {
    background-image: url('../icons/next.png');
    background-position: center right;
    background-repeat: no-repeat;
}

.amx-commandButton.prev {
    background-image: url('../icons/prev.png');
    background-position: center left;
    background-repeat: no-repeat;
}

We could also just put a single big button over the top of the image with swipeLeft/Right setActionListeners, or make the swipe button in the middle with the push buttons made narrower.

ADF Mobile gradient button generator

I recently had to do a quick demo for a potential customer which required making the app look like what they would expect, with their logo and colors. One thing I did was skin all the buttons. That was pretty easy to do in a stylesheet.

Never too late to start a blog

I’ve toyed with the idea of creating a blog for this or that, and have had personal websites that I have spewed nonsense on for a bit and then lost interest. This one might be different, let’s hope so. I have seen so many blogs lacking original content, simply copying samples from other blogs or instruction manuals.

That will not happen here.