nitido-venue v3.3.152
Venue
Venue is an JavaScript-based UI framework to help develop hybrid and web-based mobile applications.
Raison d'être
7 years ago, we were in the process of building an email web app similar to Gmail and Yahoo mail, but tailored for specific clients. Our front-end development team was very strong on the JavaScript side, but weak(er) when it came to HTML and CSS. Because of this, many issues arose with respect to layout and ui when testing across different browsers and devices and thus, releases were constantly being pushed back, conflicts in code were a regular occurrence and other nasty issues kept creeping up.
In addition, our devs came from a Java background, so their UI development was of the Java Swing and JME variety. That is, they were familiar with using objects to layout and draw. That's when we, as a company, decided to create an internal framework, initially just for desktops (before mobile became the rage), that took of advantage of JavaScript to create UI components and provide a layout engine. Realizing the increase in productivity from our developers, the next logical step was to extend this framework to support the mobile side.
StackEdit stores your files in your browser, which means all your files are automatically saved locally and are accessible offline!
First steps to use Venue
When developing a venue application (VA), there are a few things that must be known and configured.
The basic structure of a complete VA looks like this:
The root directory (usually the webserver/phonegap app root)
\wwwThe directory containing the source of the app itself. Please note that the name of the directory is app.
\app
\css
app specific css file(s)
\images
app specific image file(s)
\js
app specific js file(s)
\lang
app specific language file(s)
\any custom directories for the app
app.config (**see configuration bellow**)Additional directories autmomatically created by the VA command line interface (cli). These house the necessary venue files as well as the initial index files. The index.html file is mainly used for cordova based hybrid-apps, and the index.jsp/php files are used for web apps served from a web/servlet container.
\ css
venue css file(s)
\ js
venue js file(s)
\ lang
venue lang file(s)
\ themes
venue themes file(s)
index.html
index.jsp (if tomcat or other webserver is installed)
index.php (if php is installed)Basic template
Venue is really simple, just need a basic HTML to run, this HTML should be localed in index.html/jsp/php, the code is the following:
<!DOCTYPE html>
<html class='nv'>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Cache-control" content="no-cache">
<meta http-equiv="Expires" content="-1">
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<title></title>
<link rel="stylesheet" href="http://venue.nitido.com/dist/latest/css/venue.css">
<script src="http://venue.nitido.com/dist/latest/js/venue.js"></script>
</head>
<body>
<div id="nv-stage-activity">
<div></div>
</div>
<div id="nv-stage-wrap">
<div id="nv-lang-page" class="nv-offscreen"></div>
<div id="nv-auth-page" class="nv-offscreen"></div>
<div id="nv-stage-loading" class="nv-offscreen">
</div>
<div id="nv-stage-container" class="nv-offscreen">
<div id="nv-stage-overlay"></div>
<div id="nv-app-container"></div>
</div>
</div>
</body>
</html>Configuration
The app.config as the name implies, contains the configuration details of the application, should be located under app folder, please see root directory.
{
"nimProperties": {
"baseApiUrl": "http://www.abc.com",
"napi": "http://napi.abc.com",
"proxyUrl": "bin/proxy.php",
"useProxy": false,
"connectionManagerRequestTimeout": 60000,
"debug": true,
"auth": {
"signIn": {
"url": "http://signin.ntido.com",
"params": {
"aId": "locker",
"rt": "json",
"fp": "[user,as,sso,ct]"
}
},
"signOut": {
"url": "https://signout.abc.com",
"params": {
"aId": "locker"
}
},
"forgotPasswordUrl": "http://forgot.abc.com",
"profile" : {
"url" : "http://profile.abc.com"
},
"policy": "o",
"page": "local",
"pageUrl": "http://showauthpage.abc.com"
}
},
"stage": {
"title": "App",
"settings": {
"display": false
},
"user": {
"display": true
},
"header": {
"display": true
},
"footer": {
"display": false
},
"leftSidebar": {
"display": true
},
"rightSidebar": {
"display": true
},
"navbar": {
"position": "bottom"
}
},
"app": {
"id": "App",
"name": "App",
"scripts": [ "controller.js" ],
"dashboard": {
"title": "App",
"anchor": "leftSidebar"
}
}
}Writing an application
There are a few things to keep in mind when writing a VA. Certain properties, objects and methods are exposed to make things easier.
Properties
user: A reference to the authenticated user.
parent: A reference to the Application's UI Container.
dashboard: A reference to the application's dashboard instance (if used).
navbar: A reference to the application's navbar instance (if used).
leftSidebar: A reference to the application's left sidebar instance (if used).
rightSidebar: A reference to the application's right sidebar instance (if used).
Methods
init: Will automatically be called by the Venue bootstrap process. The implementation of this method should prepare the application to be started and added to Venue.
destroy: Will automatically be called by the Venue teardown process. The implementation of this method should prepare the application to be stopped and removed from Venue.
notify: Called whenever the application needs/wants to be notified.
showNotify: Called before the application is made visible.
hideNotify: Called after the application is hidden.
handleOnline: Automatically called when network connection goes online.
handleOffline: Automatically called when network connection goes offline.
handleSearch: Automatically called when a search is requested for this application.
handlePause: Automatically called when the application is paused (for hybrid apps).
handleResume: Automatically called when the application is resumed (for hybrid apps).
handleDashboardSelection: Automatically called when a dashboard item is clicked/tapped/selected.
handleNavBarSelection: Automatically called when a tab in the navigation bar is clicked/tapped/selected.
setActivityMessage: Convenience method for applications to display system messages.
displayErrorDialog: Convenience method for applications to display an error dialog.
localize: Method that localizes the string associated with the given key and replaces any placeholders with values passed in.
setBadge: Sets the text of the badge of a specific tab in the application's NavBar.
clearBadge: Clears the text of the badge of a specific tab in the application's NavBar.
addPage: Adds a page to the application.
showPage: Displays the given page of the application.
refreshPage: Refreshes a page of the application.
getCurrentPage: Returns the application's current page.
goBack: Go back to previous page of the application.
Building Venue Apps using PhoneGap
Login to PhoneGap, if you don't have an account create a free acccount at here *You will need an Apple key to build iOS apps
ZIP your wwww root Venue app folder
Upload the ZIP file to PhoneGap
Enter your name App in PhoneGap site
Press Ready to Build
Once Android or WinPhone icons turns to Blue, you can download the apps to test it
for iOS apps need to enter your apple licence key
more info here
Any problems or issues can be addressed through venue@nitido.com or HipChat room Venue
Venue Distribution
You can use directly Venue's CSS and JavaScript. Just use these Venue links.
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://venue.nitido.com/dist/latest/css/venue.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="http://venue.nitido.com/dist/latest/js/venue.min.js"></script>Venue with SVN
You can also use and manage Venue's Sass, CSS, JavaScript, and fonts using SVN:
svn checkout http://svn.nitido.com/venue/trunk/Precompiled Venue
Once downloaded, unzip the compressed folder to see the structure of (the compiled) Venue. You'll see something like this:
venue/
├── css/
│ ├── venue.css
│ └── venue.min.css
├── js/
│ ├── venue.js
│ └── venue.min.js
├── lang/
│ ├── en.js
│ └── es.js
├── themes/
│ ├── simple
│ │ ├── theme.css
│ │ └── theme.js
│ ├── material
│ │ ├── theme.css
│ │ └── theme.js
│ └── flat
│ ├── theme.css
│ └── theme.js
└── fonts/
├── ionicons.woff
├── ionicons.ttf
├── ionicons.svg
└── ionicons.eotVenue source code
The Venue source code download includes the precompiled CSS, JavaScript, and font assets, along with source Sass, JavaScript, and documentation. More specifically, it includes the following and more:
web/
├── css/
│ ├── _defaults.scss
│ ├── _mixins.scss
│ ├── desktop.css
│ ├── icons.css
│ ├── reset.scss
│ └── stage.scss
├── js/
│ ├── core/
│ │ ├── applicationmanager/
│ │ │ └── applicationmanager.js
│ │ ├── baseapplication/
│ │ │ └── baseapplication.js
│ │ ├── basecontroller/
│ │ │ └── basecontroller.js
│ │ ├── brand/
│ │ │ └── brand.js
│ │ ├── browserfeatures/
│ │ │ └── browserfeatures.js
│ │ ├── connectionmanager/
│ │ │ ├── lib/
│ │ │ │ └── ajax.js
│ │ │ └── connectionmanager.js
│ │ ├── env/
│ │ │ └── env.js
│ │ ├── event/
│ │ │ ├── lib/
│ │ │ │ └── touch-gestures.js
│ │ │ └── event.js
│ │ ├── lang/
│ │ │ └── lang.js
│ │ ├── listener/
│ │ │ └── listener.js
│ │ ├── loadutility/
│ │ │ ├── lib/
│ │ │ │ └── lazyload.js
│ │ │ └── loadutility.js
│ │ ├── localemanager/
│ │ │ └── localemanager.js
│ │ ├── nim/
│ │ │ └── nim.js
│ │ ├── storage/
│ │ │ └── storage.js
│ │ ├── urlcontroller/
│ │ │ └── urlcontroller.js
│ │ └── user/
│ │ └── user.js
│ ├── service/
│ │ ├── authentication/
│ │ │ └── authentication.js
│ │ └── napi/
│ │ └── napicontroller.js
│ ├── ui/
│ │ ├── applicationcontainer/
│ │ │ └── applicationmanager.js
│ │ ├── basecomponent/
│ │ │ └── basecomponent.js
│ │ ├── button/
│ │ │ └── button.js
│ │ ├── checkbox/
│ │ │ └── checkbox.js
│ │ ├── choicegroup/
│ │ │ └── choicegroup.js
│ │ ├── container/
│ │ │ └── container.js
│ │ ├── dashboard/
│ │ │ └── dashboard.js
│ │ ├── dashboardaction/
│ │ │ └── dashboardaction.js
│ │ ├── dashboarditem/
│ │ │ └── dashboarditem.js
│ │ ├── dashboarditemgroup/
│ │ │ └── dashboarditemgroup.js
│ │ ├── dropdownlist/
│ │ │ └── dropdownlist.js
│ │ ├── form/
│ │ │ └── form.js
│ │ ├── iframe/
│ │ │ └── iframe.js
│ │ ├── image/
│ │ │ └── image.js
│ │ ├── label/
│ │ │ └── label.js
│ │ ├── link/
│ │ │ └── link.js
│ │ ├── panel/
│ │ │ ├── lib/
│ │ │ │ ├── iscroll.js
│ │ │ │ └── overthrow.js
│ │ │ └── panel.js
│ │ ├── popuppanel/
│ │ │ └── popuppanel.js
│ │ ├── stage/
│ │ │ ├── lang/
│ │ │ │ ├── stage-default-lang_en.js
│ │ │ │ └── stage-lang_es.js
│ │ │ └── stage.js
│ │ └── textfield/
│ │ └── textfield.js
│ ├── util/
│ │ ├── actionlistener/
│ │ │ └── actionlistener.js
│ │ ├── animation/
│ │ │ ├── lib/
│ │ │ │ └── morpheus.js
│ │ │ └── animation.js
│ │ ├── cookie/
│ │ │ └── cookie.js
│ │ ├── date/
│ │ │ ├── lib/
│ │ │ │ └── xdate.js
│ │ │ └── date.js
│ │ ├── dom/
│ │ │ └── dom.js
│ │ ├── domevent/
│ │ │ └── domevent.js
│ │ ├── hashtable/
│ │ │ └── hashtable.js
│ │ ├── history/
│ │ │ └── history.js
│ │ ├── objecthelper/
│ │ │ └── objecthelper.js
│ │ ├── selector/
│ │ │ └── selector.js
│ │ ├── stringhelper/
│ │ │ ├── lib/
│ │ │ │ └── filesize.js
│ │ │ └── stringhelper.js
│ │ └─ timer/
│ │ └── timer.js
│ └─ widget/
│ ├── audioplayer/
│ │ └── audioplayer.js
│ ├── authpage/
│ │ └── authpage.js
│ ├── buttongroup/
│ │ └── buttongroup.js
│ ├── chart/
│ │ ├── lib/
│ │ │ └── Chart.lib.js
│ │ └── chart.js
│ ├── datepicker/
│ │ ├── lib/
│ │ │ └── pikaday.js
│ │ └── datepicker.js
│ ├── dropdown/
│ │ └── dropdown.js
│ ├── fileuploader/
│ │ ├── lib/
│ │ │ └── qq.js
│ │ └── fileuploader.js
│ ├── googlemap/
│ │ └── googlemap.js
│ ├── htmlrenderer/
│ │ └── htmlrenderer.js
│ ├── imagecaption/
│ │ └── imagecaption.js
│ ├── inputgroup/
│ │ └── inputgroup.js
│ ├── langpage/
│ │ └── langpage.js
│ ├── listview/
│ │ └── listview.js
│ ├── modalpanel/
│ │ └── modalpanel.js
│ ├── page/
│ │ └── page.js
│ ├── stepprogressbar/
│ │ └── stepprogressbar.js
│ ├── swipeablestack/
│ │ ├── lib/
│ │ │ └── swing.js
│ │ └── swipeablestack.js
│ ├── switchbutton/
│ │ └── switchbutton.js
│ ├── timeagolabel/
│ │ └── timeagolabel.js
│ ├── videoplayer/
│ │ └── videoplayer.js
│ └─ webview/
│ └── webview.js
├── themes/
│ ├── simple
│ │ ├── theme.css
│ │ └── theme.js
│ ├── material
│ │ ├── theme.css
│ │ └── theme.js
│ └── flat
│ ├── theme.css
│ └── theme.js
├── fonts/
│ ├── ionicons.woff
│ ├── ionicons.ttf
│ ├── ionicons.svg
│ └── ionicons.eot
└ java/