UIC

UIC stands for Unified Interaction Component. It enables user to create multi-platform native like apps with simple HTML5. UIC facilitates creation of cross-platform apps with unified HTML structure which makes it simple for developer to create apps and prototypes in real quick time. It is developer friendly as developer can create apps in his or her own preferred development environment and the app will already be there in other platforms, one just has to make app specific changes if at all and his app will be ready for all supported platform.

UIC is built on open industry standards such as Bootstrap and jQuery Mobile which allows developer to leverage their existing knowledge and build application rapidly even if someone doesn’t have mobile domain background such as a seasoned web developer, he will feel comfort right at home with UIC.

UIC Components

UIC is built on modular and extensible approach so every component has its unique own role and responsibility. Components allows us to abstract the details and expose functionality through API. They also provide the extensibility to the end user if they want to extend some feature or use existing API to create new one for his or her own app consumption. UIC has following components

  • Import Manager
  • Navigation Manager
  • Animation Manager

Import Manager

UIC supports two development environment i.e. Development and Production. The development version allows developer to deep dive into the code and avail all the debugging services that UIC facilitates for faster development cycle, whereas production version comes with minified files which has faster load time. Import manager is responsible for enabling and loading environment specific files into application. Detecting platform and loading version specific files and styles are operations that are performed by Import manager. It’s also a place for enabling third party framework integration with UIC and specifies various file that needs to be loaded conditionally such as SmartWeb or any other MVC framework.

You can override appEz variable to set development environment. Following are variables that you can override in Import manager

appit.env = 'dev'; // or prod

appit.weinre = false; // or true (More on this later)

appit.smartwebEnabled = true; // or false

appit.smartwebPrefix = ''; // third party lib path delta

appitDebug.webTheme = 'android-ics'; // or any of UIC theme wrapper (More on this later)

lessUrl = '', // path to less compiler (More on this later)

styleUrl = '', // path of file to be written on document (More on this later)

weinreUrl = '' // weinre debug URL (More on this later)

Where

appit.env – Can have two possible values either of 'dev' or 'prod' for development and production environment respectively. It determines which files will be loaded into the index file or web view if user is using third party MVC framework such as SmartWeb.

appit.weinre – Enables live Web View debugging of styles using Weinre project.

appit.smartwebEnabled – If you want to use appIt SmartWeb MVC for structuring for JavaScript code then it has to be true.

appit.smartwebPrefix – As Import Manager determines file path at runtime to import based on development environment so if you are using SmartWeb then you have to update the path delta in this variable so that all the required files and styles gets loaded properly.

appitDebug.webTheme – Web theme to apply when you debug a hosted application on the server such as Apache. It can be any of android-gb, android-ics, ios-six, ios-seven or wp-eight. We will discuss about debugging a UIC application in detail in Debugging section.

lessUrl – Path of the less compiler, if you want to use local less compiler for compiling your .less file to .css file on the fly.

styleUrl – Compile path of the style file that gets derived based on SmartWeb is enabled or not and written to the document at run time.

weinreUrl – Path of the server URL where Weinre is hosted.

It is responsible for screen transition and stack management of app. internally it uses jQuery Mobile’s History Manager for stack management. It provides simple api to for in app navigation to the developer without having to worry about screen stack management. Navigation Manager exposes following functions via uic.navigate alias, they are

uic.navigate.to()

uic.navigate.firstScreen()

uic.navigate.back()

uic.navigate.getPageId()

transitionTo()

Where

uic.navigate.to(pageId, animate) – Enables user to navigate from one screen to another. It takes two parameter, first one is the id of the screen div to navigate to and second is a Boolean parameter if user don’t want the default platform animation which happens when page transition from one to another such as in iOS.

uic.navigate.firstScreen() – User can call this function to navigate to first screen from any page in application.

uic.navigate.back() – Shorthand method for navigating to previous screen, if user is on the first screen and this method is called user will be for ask for app exit confirmation.

uic.navigate.getPageId(pageState) – It takes page state which can be either of active, back or next to get the id of corresponding positioned page in dom. next parameter for this function is not supported in UI flows where screen navigation is asynchronous and user can randomly go to any page such as tile flow where user can tap on any tile to navigate, in that case it will be impossible to know what will be the next page.

uic.navigate.transitionTo() – This method is exposed just for debugging purpose in case you have to navigate without using history manager.

Animation Manager

Animation Manager is responsible for transition and animation that occurs when user navigates from one page to another on platforms that supports animation in their design guidelines such as iOS. It exposes only one method screenTransition that accepts a configuration object as a parameter and performs platform specific animation.

var aniConfig = {

'activePageId': pageId,

'targetPageId': pageId,

'dir': direction

};

appit.uic.animation.screenTransition(aniConfig);

Where

activePageId is the id of the pgae which is visible right now, targetPageId is the id of the page which will be visible once animation has completed, and dir is the direction of the navigation which can be either of 'forward' or 'backward'.

UI Components

UIC is based on Bootstrap 3, so for creating any layout one has to follow the Bootstrap layout rules and study the base CSS definitions that one has to apply or modify for app specific changes. There are so many permutations and combinations that one can use to build a page layout. So here we are only going look at some of the common elements and components that we have extended for mobile apps.

Base Skeleton

Following will be the common classes that one should use to give structure a page.

<html>

<body>

<div class="container uic-page active-page">

<div class="scroll-wrap">

<div class="content">

<!-- here goes the content layout of the page -->

</div>

</div>

</div>

</body>

</html>

Where

container – It is wrapper class for every page which provides responsive layout to the content of the page using media query. It is a part of Bootstrap layout. UIC has overrides some of the properties of it to make it look like native container wrapper such as margin and padding.

uic-page – It is UIC specific class and represents a single page in a UIC app, provides basic layout structure to the page.

active-page – It represents the active visible page in the application.

scroll-wrap – Wrapper class for controlling the scroll overflow to only scrollable area.

content – This class represents the actual design layout the page. Within the content user can use any valid bootstrap layout combination such grid layout, list layout or any other one.

Fixed Bar

Fixed bar is based on navbar Bootstrap component in combination with navbar-fixed-top and navbar-fixed-bottom classes with platform specific overrides to achieve fixed positioned top bar and bottom bar component.

<div class="navbar navbar-fixed-top">

<div class="container">

<div class="navbar-header">

<div class="navbar-brand">

<label class="page-title">

First Page Title

</label>

</div>

</div>

</div>

</div>

Where navbar, navbar-fixed-top, navbar-header and navbar-brand are bootstrap classes that give structure to the bar layout. UIC has override some of those classes for platform specific native themes. page-title is a UIC specific class which handler text alignment and layout of title of the page for all supported platforms. Fixed positioned elements are placed above scroll-wrap container as we don’t want these elements to be part scrollable area.

navbar-fixed-top class adds behavior to the fixed bar to stay at the top and you can replace it with navbar-fixed-bottom to stick the fixed bar at bottom position.

Subgroup

Subgroups are used in Android and iOS to display a sub category of a particular category. It is a UIC specific class that gives platform specific behavior to subgroup titles.

<p class="subgroup screen-title">

Where screen-title is a specific class which can be used in conjunction with subgroup to give Windows like panoramic sub title. This class is optional it can also be used with page-title class to give classic title style in WP8 rather than panoramic one.

Group

Group helps to classify various related but different section of the screen. It also a UIC specific class it managed layout and padding for screen content across platforms.

<div class="group">

It can also be applied on other generic HTML container such as form.

List Group

List group has following variants

Single Liner

Used for showing single line of plain content

<ul class="list-group group">

<li class="list-group-item disclosure ">

<div class="ellipsis"> Cras justo odio </div>

<hr class="divider"/>

</li>

</ul>

Where list-group, list-group-item is a Bootstrap class which provides list styling and responsive layout to the list and UIC overrides them to match platform specific themes and styles. ellipsis is UIC specific class which overrides the text overflow and show ellipsis if text exceeds the configured width. divider is iOS 7 specific UIC class which shows divider between various list items and disclosure is iOS specific class which used to that interaction with the element will take user to next level .

Single Liner Thumb

Used to show plain information with a single image.

<ul class="list-group group">

<li class="list-group-item disclosure ">

<img class="media-object pull-left" src="../../appit/uic/resources/img/icon_user.png"> </a>

<div class="ellipsis"> Cras justo odio </div>

<hr class="divider"/>

</li>

</ul>

Where media-object and pull-left is Bootstrap specific classes styles the image and its layout and pull-left force the element to be left aligned.

Multi Liner

Used to show multi line information in a singled record.

<ul class="media-list group ">

<li class="media">

<div class="media-body disclosure">

<div class="media-heading ellipsis"> Irene Ros </div>

<div class="ellipsis media-desc"> Cras sit amet nibh libero </div>

<hr class="divider"/>

</div>

</li>

</ul>

Where media-list, media-object and media-body are Bootstrap specific classes which UIC overrides to provide platform specific layout and styles. media-heading and media-desc are UIC specific classes which deals with font size and layout of multi liner in platform specific manner.

Multi Liner Thumb

Used to show multi line information.

<ul class="media-list group ">

<li class="media">

<a class="pull-left" href="#">

<img class="media-object" src="../../appit/uic/resources/img/icon_user.png">

</a>

<div class="media-body disclosure">

<div class="media-heading ellipsis"> Irene Ros </div>

<div class="ellipsis media-desc"> Cras sit amet nibh libero </div>

<hr class="divider"/>

</div>

</li>

</ul>

Flex Model

UIC provides special class for styling layout using Flex Box Model, it provide only generic layout which can be customized further for app specific requirements. These classes can be mixed and matched with existing Bootstrap classed to achieve more advance layout.

<div class="navbar navbar-fixed-top flex-box center-align">

<div class="container flex-box">

<img src="../resources/images/logo.png" alt="brand">

<span> Tagline </span>

</div>

</div>

Where flex-box is UIC specific class that applies box layout to a normal element, user don’t have to bother about different vendor prefixes as it is already been taken care by UIC. For child alignment for a flex box container there are more classes center-align which places all child of the element at the center of the parent container and right-align which forces right aligned layout to container. There is no left-align class as it is the default behavior of flex container.

User has to be careful while using Flex Box Model for its app layout as not all the properties of Flex Model till now are supported cross platform.

UIC Dependencies

Following are the dependencies to use UIC:

  • **Bootstrap :** It is used for responsive layout and basic styles. Bootstrap is most popular framework for developing responsive, mobile first application. It has grid based layout system which adjusts to all screen sizes and resolution, easily customizable and has a wide open source community support. It is most starred project on GitHub. It will reduce developer’s time to boot the application and focus on business logic.
  • jQuery Mobile: UIC is using the custom build of jQuery mobile where only those features that are required have been used. Particularly the event system and history manager module is used extensively in UIC. Other features that we are using are orientation support, path module and some iOS specific fixes. An important module that we are not using is the page container and hash based URL navigation of screen as these modules have tight coupling with jQuery mobile’s CSS but we are using Bootstrap for theming and layout. Because of this one won’t be able to use page container or page related life cycle events such as page change, page loaded, mobile init, hash change etc.
  • LESS.JS (Optional): It is used to compile .less file on the fly to .css file. It is just a developer add-on and is not recommended for production use. Ideally we use command line tool or other less compiler software to compile less to CSS then include CSS into page for faster load time. Less compiler has a limitation on older versions browsers where it can’t compile .less on the fly to .css, to work it around first we have to compile less files into CSS and then include them into page. It is just a development dependency as in production anyway no one is going to use less files. By default the import statement in platform specific less files will point to the app.less file according to the structure in the SmartWeb. If the developer has placed the app.less somewhere else then he needs to specify the location in each of the platforms LESS file (ios-six.less, android-ics.less etc).

Guidelines:

  • If the developer is using development version of UIC, i.e. with LESS files in library, then he can use app.less at the application end. It will be the responsibility of the developer to generate the CSS files for theses LESS files when running them on device(s).
  • If the developer is using production version of the UIC, then he can override and extend the properties of the library using app.css file.

Overriding Style

UIC apply platform wrapper for easy overrides of styles, based on specific platform they are on body tag:

  • For Android GB (2.3) – Android Honeycomb (3.2) wrapper is android-gb
  • For Android ICS (4) and above wrapper is android-ics
  • For iOS (5) – iOS(6) wrapper is ios-six
  • For iOS (7) and above wrapper is ios-seven
  • For Web default wrapper is android-ics

LESS Overrides

If you want to customize the default Bootstrap and UIC build for a revamp or theming then one should go for overriding less variables and styles defined in source files of those two libraries. As user is free to follow any structure on application side for their code, to override default less files there is a placeholder at the bottom of platform specific UIC less files which user can update to reflect his file location, after that he has to un-comment that import line for changes to take effect. User can locate files at appit/uic/resources/styles where all platform specific less files are placed. It is necessary to place the import statement for user specific less file at the bottom i.e. it must be the last statement in the file to successfully override and reflect changes. To override platform specific CSS style attributes user have to use platform wrapper as parent and then define the styles e.g. if one wants to change the button’s background color for Android ICS only he can write it as

@green: #99530;

.android-ics{

.btn{

background-color: @green;

}

}

CSS Overrides

If you don’t want to change too many things and have UIC downloaded as production build i.e. minified CSS version. You just have to import your application specific CSS after the UIC CSS and override the property you want with platform specific wrapper e.g. if one wants to change the button’s background color for Android ICS only he can write it as

.android-ics .btn{

background-color: green;

}

results matching ""

    No results matching ""