View Source

h2. Overview
_Since EE-4.0_

The mobi:onlineStatus component renders an element that has its CSS class changed depending on what the online state of the browser. Also it provides attributes that can take Javascript code that is executed when browser goes online or offline.

h2. Getting Started

To start using the online status component, simply place the mobi:onlineStatus tag inside a the body of the page and add the attributes for the on/off CSS classes and/or the Javascript code to be executed.
{code:xml}
<h:body>
<style type="text/css">
.offlineBackground { background-color: red; }
.onlineBackground { background-color: green; }
</style>

<mobi:onlineStatus onlineStyleClass="offlineBackground" offlineStyleClass="onlineBackground"/>
</h:body>
{code}
{code:xml}
<h:body>
<script type="text/javascript">
function offline(element) {
element.innerHTML = 'Your browser is offline!'
}
function online(element) {
element.innerHTML = '';
}
</script>

<mobi:onlineStatus onOnline="online();" onOffline="offline();"/>
</h:body>
{code}

h2. Attributes

{tip:title=TagLib Documentation}This section covers attributes involved in the typical use-cases for this component. For reference, the complete taglib documentation for this component is available [here|http://res.icesoft.org/docs/v4_latest/mobi/tld/].{tip}

{panel}
The *onlineStyleClass* attribute specifies the CSS class applied to the component's root element when browser is online.
{panel}

{panel}
The *offlineStyleClass* attribute specifies the CSS class applied to the component's root element when browser is offline.
{panel}

{panel}
The *onOnline* specifies the JavaScript to be evaluated when the browser goes online. The 'element' argument passed to the callback code is the root element of the component.
{panel}

{panel}
The *onOffline* specifies the JavaScript to be evaluated when the browser goes offline. The 'element' argument passed to the callback code is the root element of the component.
{panel}


h2. Event Listeners

None.

h2. Client Behavior Events

None.

h2. JavaScript API

None.

h2. Keyboard Support

None.

h2. Known Issues

None.

h2. Additional Resources


h4. Sample Applications

This component appears in the following ICEfaces sample applications:

* *[ICEfaces Mobile Showcase|http://icefaces-showcase.icesoft.org/showcase-mobile.jsf]*


h4. Tutorials

This component appears in the following ICEfaces tutorials:

*None*