Home

User Manual Copyright © 2012 Kalitte Professional

1. a g Pertenece New Go Into Open in New Window Open Type Hierarchy Fa Show In Alt Shift W gt Copy Cat Paste Ctrl V Delete Delete x t Pw Remove from Context Ctrl Alt Shift Down Build Path D Source Alt Shift S gt Refactor Alt Shift T gt New Source Folder Use as Source Folder s Add External Archives rA Export Add Libraries 7 Refresh F5 Configure Build Path Close Project Assign Working Sets Compare With Restore from Local History Spring Tools D Java EE Tools Configure Properties Alt Enter m sp zm e AddKalitte DynamicDashboard BaseProvider jar from file system e Create a new source source folder and a package Then you can create your provider class Spring gSo A s File Edit Source avigate Search Project Run Window Help factor D F O Q ee 8 G97 O 0 H rd Hi Package Explorer 3 E es oO 4 12 testprovider 9 src main resources gt B JRE System Library 25E 1 5 gt HBA Maven Dependencies gt BA Referenced Libraries gt sre b target New Source Folder Seo Bg D pomxml Source Folder Create a new source folder Project name testprovider Browse Folder name src main java Browse Update exclusion filters in other source folders to solve nesting y 2012 Kalitte Imple
2. Initialize a dashboard view var viewer new DashboardView id myViewer dashboard viewer startup Load a dashboard when viewer load 269 function dashboard Get layout var layout viewer layout Add new section var myNewSection layout addSection myNewSection Now add a new zone var myNewZone layout addZone myNewSection section myNewZone Add custom zone properties style background color yellow Ie Save to your data source viewer save function err console error Can t load dashboard DEVELOPING NEW LAYOUTS Developers can create their own layouts You can use existing layout classes to extend them or use klt dash layout Layout class to start from scratch bya 2012 Kalitte WORKING WITH THEMES With the help of themes you can change user interface of dashboard layout and panes DD also supports custom themes A theme is defined by e Anid value which uniquely identifies the theme e Path to a cascading style sheet css file e An optional list of styles which theme supports e An optional default style identifier Below is a sample theme definition css require toUrl resources themes classic main css styles Ga f title Default olor ME EORR Ee Bluen color Ve lo pieke UERSUM Collor ME COO ou hy spl Ue color EAM Ihe title Yellow color FBEE8E Gerais sinysle UI klt
3. P A Open Dashboard AP Install Extension New and Noteworthy Feature Comparison 0 Ju 3 86 2012 Kalitte New Maven project Select an Archetype Select maven archetype webapp as an Archetype Catalog All Catalogs Filter maven Group Id org apache maven archetypes org apache maven archetypes org apache maven archetypes org apache maven archetypes org apache maven archetypes org apache maven archetypes Artifact Id maven archetype plugin site maven archetype portlet maven archetype profiles maven archetype quickstart maven archetype site maven archetype site simple Version 11 RELEASE RELEASE 11 11 11 org apache maven archetypes maven archetype webapp RELEASE A simple Java web application d Show the last version of Archetype only Include snapshot archetypes gt Advanced La oem o e Specify archetype parameters and click finish Your maven project will be created New Maven project Specify Archetype parameters Groupld com myprovider Version 0 0 1 SNAPSHOT Package com myprovider testprovider Properties available from archetype Name Value e Right click on project root element and select build path then click Add External Archives 2012 Kalitte Sing zem See rei Raam Ove 2 106 0 QqQ BHO S G V O2 0 H P 797 f Sele e
4. E 2012 Kalitte Create a new dashboard model using myLayout var myDashboard new DashboardModeli title My Dashboard layout myLayout Save to data source var myProvider Manager getInstance when myProvider createDashboard myDashboard function result logic on success function error JL kogic orat fall A row column layout can be created similar way i require klt dash provider Manager klt dash model DashboardModel klt core when klt dash layout RowColumnLayout klt dash provider JsonRest JsonRestProvider function Manager DashboardModel when RowColumnLayout Define a row column layout var myLayout new RowColumnLayout sections mySectionl zones myZonel TIE var myDashboard new DashboardModeli title My Dashboard layout myLayout DT Save to data source var myProvider Manager getInstance EIS 2012 Kalitte when myProvider createDashboard myDashboard function result logic on success function error PE MOGULS win zail Pe Below table lists methods of layout objects to organize sections and zones Method Name Description addSection Adds a section removeSection Removes a section addZone Adds a zone removeZone Removes a zone Here is a basic usage require klt core when klt dash ui DashboardView function when DashboardView
5. Phor Select system webServer handlers from sections menu Click browser button of Collection row Add PUT and DELETE verbs in properties which start with ExtensionlessUrlHeader 93 Configuration Editor Section system webServer handlers Deepest Path MACHINE WEBROOT APPHOST 1 Collection ount 79 accessPolicy Collection Editor system webServer handlers Items name verb HitpRemotingHandlerFactory rem ISAPI 20 E GET HEAD POST DEBUG HttpRemotingHandlerFactory soap ISAPI 2 0 KR GET HEAD POST DEBUG AXD ISAPI 2 0 64 GET HEAD POST DEBUG PageHandlerFactory ISAPI 2 0 64 a GET HEAD POST DEBUG SimpleHandlesFactory ISAPI 20 64 si GET HEAD POST DEBUG WebServiceHandlerFactory ISAPI 2 0 64 ast GEI HEAD POST DEBUG HttpRemotingHandlerFactory rem ISAPI 20 64 GET HEAD POST DEBUG HttpRemotingHandlerFactory soap ISAPI 20 64 GET HEAD POST DEBUG CGlexe a TRACEVerbHandler TRACE OPTIONSVerbHandler m OPTIONS ExtensionlessUriHendler ISAPI 4 0 64bit GET HEAD POST DEBUG PUT DELETE ExtensionlessUriHandler Integrated 4 0 GET HEAD POST DEBUG PUT DELETE System Web Handlers TransferRequestHandler StaticFile gt a Or i Kees allowPathinfo False modules IsapiModule name ExtensionlessUrtHandler ISAPI 4 0 32bit path SS preCondition classicMode runtimeVersinw4 0 bitness32 TequireAccess Script tesourceType Unspecified responseButferLimit o scriptProcessor CAWindows
6. commands push removeCommand commands push myCommand GEW 2012 Kalitte Test Dashlet Hello World Test Dashlet MANAGING COMMANDS Use DashletContext getPaneCommand method to get a reference to an existing command Below code snippet shows how to get a command and a reference to the user interface control object his startup function var cmd this context getPaneCommand myCommand Cinel reageiert NT You can use DashletContext removePaneCommand to remove a command DashletContext paneCommands to get a list of commands RESPONDING TO COMMAND EVENTS When a command built in or custom is about to be executed Kk t dash dashlet command executing topic is published You can subscribe this topic and if necessary cancel the execution of command i this context subscribe klt dash dashlet command executing i function event if event sender this var cmd event args command if cmd name maximize event cancel true After a command is executed successfully k t dash dashlet command executed topic is published You can use event args command to get a reference to the executed command object and event args result to the result of execution WORKING WITH LAYOUTS ABOUT LAYOUTS AND DASHLET POSITION Every dashboard has a layout object which organizes dashboard layout and positions of dashlets A layout should have at least one section and a section should have at
7. jdbc username Username jdbc password Password e This file contains MySQL connection parameters To provide Connection parameters we will first create metadata e Open MySql management tool and run DynamicDashboard MySQL Metadata script e Now you created database for Dynamic Dashboard e Input Dynamic Dashboard Database information to application properties file opened four steps above Save the file and close e Open Apache Tomcat Manager Page again Click reload button which is in commands section of your application row e Congratulations you deployed Dynamic Dashboard Java Rest Service successfully CREATE CUSTOM DASHBOARD PROVIDER WITH JAVA You can create your custom dashboard provider with java by using SpringSource Tool Suite Prerequisites SpringSource Tool Suite and Java Development Kit e Install JDK and SpringSource Tool Suite e Open SpringSource Tool Suite and Create a New Maven Project Spring SpringSource File Edit Navigate Search Project Run Window Help liy Welcome 23 Select a wizard Create a Maven Project Wizards type filter text 4 Maven EI Checkout Maven Projects from SCM M Maven Module i Maven POM file M Maven Project b Plug in Development gt Remote System Explorer gt Server gt amp Spring amp SpringSource Tool Suite b SQL Development b Tasks E User Assistance gt amp Web C Web Services
8. 2012 Kalitte Source Refactor Navigate Search Project Run 0 QqQ Window Help ee Ge a SSls o New Go Into Open in New Window Open Type Hierarchy F4 Show In Alt ShifteW gt Copy Ctrl C Copy Qualified Name Paste Ctrl V X Delete Delete Remove from Context Ctri Alt Shift Down Build Path gt Source Alt Shift S Refactor Alt Shift T gt Ca Import r Export Refresh F5 Close Project Assign Working Sets Run As rv 1 Run on Server Alt Shift X R Debug As gt 2 Aspecti Java Application Alt Shift X C Profile As gt E 3 Java Applet Alt ShifteX A Validate D 4 Java Application Alt Shift X J ma Maven gt Ju 5JUnit Test Alt Shift X T Team m2 6 Maven assembly assembly Compare With m2 7 Maven build Alt Shift X M Restore from Local History m 8 Maven build Spring Tools gt m2 9 Maven clean Java EE Tools m2 Maven generate sources Configure m2 Maven install Properties jes aile R Servers 3 nner m2 Maven source jar m2 Maven test Run Configurations O Ju 8S S testprovider D Iw En oer No consoles to display at this time If you can build successfully go to target project name web inf folder which is in the project root folder You can copy the classes folder and other resource files if you have to web inf folder of restful service E S p Edit Source T PEE
9. 3 3 17 Watch gt Stack Breakpoints 211 btn onclick function New watch expression 212 klt app setTheme this theme EU z 213 n this Widget kit dash ui ModulesView kit dash ui ModulesView 0 214 demConstruct place btn themes _attachPoints 4 _attachEvents 0 dndManager 215 more 216 for var sid in themeData styles arguments D 217 var style themeData styles sid i A x 218 var styleDiv domConstruct create div title style title self Widget kit dash ui Modules View kIt dash ui ModulesView 0 219 domStyle set styleDiv width 10px _attachPoints 4 _attachEvents 0 dndManager 220 domStyle set styleDiv height 10px more 221 domStyle set styleDiv background color style color d toString En 223 styleDiv theme id E Closure Scope Closure Scope domClass domConstruct 224 styleDiv styleid sid domAttr more 226 styleDiv onclick function Window DEES 227 klt app setTheme this theme this styleid The script tab is the most important and probably the most widely used feature of Firebug It allows you to debug javascript You can place breakpoints and analyze your code step by step You can also define any javascript expression in watch section a l gt gt console HTML CSS Script DOM Net D GIG win
10. C Z Sample text and links BORDER 6082 gt Button Normal List Header gt Button Hover gt Button Pressed After finish designing your theme download it as a zip file Download Theme Theme Name This will generate a Zip file that contains both a compressed for production and uncompressed for editing version of the theme To use your theme add it to the head of your page before the jquery mobile structure file like this This will produce you a zip file which contains a css file and images folder Create an empty directory in your project i e myTheme and copy all files and folders inside e Asa startup point you can use classic theme Copy jquery mobile structure 1 1 1 min and main css file inside resource themes classic to the above directory e Download http code jquery com mobile 1 1 0 jquery mobile structure 1 1 0 min css file and copy it to the same directory e Open main css file inside your folder Replace file reference o Uncomment import url jquery mobile structure 1 1 1 min css o Replace import url classic min css with your theme import url myTheme min css o OpenmyTheme min css and myTheme css Replace text ui with d To register your theme use ThemeManager register method C 2012 Kalitte i require klt dash ui ThemeManager function ThemeManager user your path var pathToCss Content MyTheme main css ThemeManager register
11. Microsoft NET Framework v4 0 30319 aspnet isapi dll type verb GET HEAD POST DEBUG PUT DELETE allowPathinfo Data Typeboct 8 2012 Kalitte If there is a WebDav property delete it 93 Configuration Editor Section system webServer handlers E E Deepest Path MACHINE WEBROOT APPHOST Collection Count 79 accessPolicy Read Script m on svc ISAPI 4 0 32bit rules ISAPI 4 0_32bit xomHSAPI 4 0_32bit xambc ISAPI 4 0_32bit aspq ISAPI 4 0 32bit PageHandlerFactory ISAPI 4 0_22bit SimpleHandlerFactory ISAPI 4 0 32bit WebServiceHandlerFactory ISAPI 4 0 32bit HttpRemotingHandlerFactory rem ISAPI 4 0 32bit HttpRemotingHendleiFactory soap ISAPI 4 0_32bit verb type PROPFIND PROPPATCH MKCOL PUT COPY DELETE MOVE LOCK UNLOCK GET HEAD POST DEBUG GET HEAD POST DEBUG GET HEAD POST DEBUG GET HEAD POST DEBUG GET HEAD POST DEBUG GET HEAD POST DEBUG GET HEAD POST DEBUG GET HEAD POST DEBUG cshtrn ISAPI 4 0_32bit cshtml ISAPI A 0 32bit vbhtm ISAPI 4 0_32bit m GET HEAD POST DEBUG GET HEAD POST DEBUG GET HEAD POST DEBUG 93 Configuration Editor By Apply Section system webServer modules H Cancel D Deepest Path MACHINE WEBROOT APPHOST d Generate Script Configuration Search Configuration Section Lock Section System Web UriMappingsModule System ServiceModel Activetion ServiceHttpModule Syst
12. Prepends kit dash dashlet to the topic parameter and immediately calls subscribe Instead of using subscribe klt dash dashlet visualStateChanging you can use subscribeToDashlet visualStateChanging 43 subscribeToEditor Prepends kit dash dashlet editor to the topic parameter and immediately calls subscribe Saves dashlet model using provider Same as calling this context getProvider saveDashlet this context model 43 remove Removes the dashlet from dashboard and deletes the instance using provider addPaneCommand Adds a command to the pane See XXX for more information about pane commands WORKING WITH DASHLET EDITORS Optionally but generally dashlets need configuration For an RSS dashlet you may want to get RSS Url from user For a chart dashlet you will probably want your users to customize the appearance of your charts DD provides you to set an editor for your dashlet When user wants to configure your dashlet editor is automatically created and displayed to the user First step to have an editor for a dashlet is adding a configuration value to dashlet module which defines the editor path klt dash provider Manager klt core when klt dash provider JsonRest JsonRestProvider i function DashletModuleModel Manager when Create a DashletModuleModel instance var module new DashletModuleModel path dashlets myDashlet viewer emeles Welle Wacken Y Add a configuration object incl
13. be used to define design modes A dashboard can have one of the following design modes DesignMode Description none Dashboard is read only Users cannot add new dashlets nor re organize edit existing dashlets dashlet Users can only edit existing dashlets full Users are able to edit layout of dashboard add new dashlets re organize edit existing dashlets Initial design mode of DashboardView object can be set as an initialization parameter If you don t set it defaults to designMode none require klt dash ui DashboardView klt dash core designMode function DashboardView designMode i var view new DashboardView designMode designMode full node Use set method to set design mode of an existing DashboardView object require klt dash ui DashboardView klt dash core designMode i function DashboardView designMode var view new DashboardView null node view load 200 view set designMode designMode dashboard ID WORKING WITH DASHLET MODULES Client provider allows developers to register dashlet modules query existing modules and do CRUD operations on them In this section only client provider methods related with dashlet modules will P 2012 Kalitte be explained More information about dashlet modules can be found inside Dashlet Development section REGISTERING NEW DASHLET MODULE To register a dashlet module create an instance of k1t da
14. css this context loadResource this cssFile css this destroyRecursive function unload resource when user removes dashlet instance this context unloadResource this cssFile css When startup function is called style sheet file is loaded dynamically and when destroyRecursive is called resource is unloaded loadResource function href type callback c unloadResource function href type You can optionally set a callback function when resource is loaded The magic behind 1oadResource and unloadResource functions is that they both count how many times they are called for a specific resource file When user adds a second instance of a dashlet to the dashboard 2012 Kalitte loadResource increments the counter of the requested resource If an unloadResource is called for that resource file DD simply ignores and does not unload the resource because it assumes there is a dependency to that resource LOADING JAVASCRIPT FILES DYNAMICALLY Although you can use loadResource and unloadResource functions to load unload external JavaScript files we recommend you using require If the JavaScript file is AMD formatted you can load it as usual EE EE ORG return function var res 1 for var i 0 i arguments length itt res res arguments i return res fine require function require return function params this context p
15. dash ui ThemeManager class is responsible from managing themes RETREIVING THEMES AND STYLES O 2012 Kalitte ThemeManager getThemes method can be used to retrieve a list of registered themes ThemeManager currentThemeld property returns current theme id By default theme with id classic is loaded require klt dash ui ThemeManager function ThemeManager var themes ThemeManager getThemes for var tid in themes var theme themes tid id of theme console info ThemeManager currentThemeId tid wie ap Y shee qguGE GNE 9 13g P console info Theme supports following styles get styles var styles theme styles for var sid in styles var style styles sid consoler nOs S Ey e V wp gael gr WY alice Y ap sicwile testicle 5 Below is a sample output i classic is current Theme supports following styles style id c title Default style id b title Blue style id d title Gray style id a title Black style id e title Yellow CHANGING THEME ThemeManager select method can be used to change a theme and style functiong A2 Sings Ac ME E Sibi o M dave Above code snippet loads theme with id classic and style with id a black PERSISTING SELECTED THEME AND STYLE LI O2012 Kalitte Two helper functions ThemeManager saveToCookie and ThemeManager loadFromCookie can be used to save load current the
16. dashlet visualStateChanging event console info visualStateChanging received Cancelling event cancel true ns essageBus publish some topic happening event then P handler for success function ET console info Successfully happened Publishing messageBus publish some topic happened 7 handler for failure function console info Cancelled mos messageBus subscribe returns a simple object containing a remove method which can be called to unsubscribe the listener For better memory management you should consider calling this method when you don t need subscription anymore BASIC CONCEPTS Below concepts are used in this document Dashboard Dashboard is the main container which should include a layout and a number of optional dashlets Layout Layout is the container for dashlets and responsible for positioning and lay outing of them DashletPane DashletPane or simply Pane is the container for a single dashlet Pane includes a header and body which holds Dashlet instance DashletModule DashletModule is a logical container which describes common properties and AMD formatted JavaScript dashlet file It s class of a dashlet DashletEditorModule DashletEditorModule is an AMD formatted JavaScript file which defines an editor for a dashlet module Dashlet Dashlet is an instance of a DashletModule DashletContext DashletContext is the bridge between your dashlet and DD Fra
17. di Calculate Code Metrics P E ab View in Page Inspector Add B Area View Class Diagram An area should be created Create following classes under Controllers folder of api area 4 dm Areas 4 a api 4 dm Controllers b c DashboardController cs b Ce DashletController cs b Ce DashletModuleController cs These classes handle dashboard requests They must be inherited from base classes under Kalitte Dashboard Mvc Controllers namespace For example DashboardController cs class must be defined like public class DashboardController DashboardControllerBase Any method in base class can be override here ASP NET MVC 4 CONFIGURATION Follow every instruction for MVC 3 configuration Some extra modifications need to be done First go RouteConfig cs file under App Start folder of your application There should be a route setting for api area Modify it like this O 2012 Kalitte routes MapHttpRoute name DefaultApi routeTemplate api controller action id defaults new id RouteParameter Optional This should be enough to run dashboard application If you receive errors in some HTTP verbs like PUT or DELETE you may need IIS configuration Select Configuration Editor in the manage server menu us m m Authentic Authorzat 8 Default Directory Rules Document Browsing Management DJa A o Configuratio Feature Shared Web E Delegation Configuat
18. function DES implement first time initialization logic for your module return function implement your logic related with each dashlet instance created If your module has dependencies that should be loaded before your module loads you can use the dependencies parameter Load baseChart js and chartSerie js modules located in same directory g before defining module ER 2012 Kalitte define baseChart chartSerie function baseChart chartSerie Load baseChart js and chartSerie js files located in the same directory baseChart and chartSerie parameters are return value of dependent modules return function require function loads a module load chartDashlet js and set its return value to chartDashlet parameter require chartDashlet function chartDashlet use chartDashlet When you want to use chartDashlet using require function 1 AMD loader tries to load chartDashlet js file 2 Since there exists dependencyies to baseChart and chartSerie they are loaded first 3 Return value is returned BOOTSTRAPPING YOUR APPLICATION Bootstrap file is responsible for configuring module loader and loading initially important dependencies In the below example we configure module loader to set base url in which scripts are located and configure packages Also we tell module loader to load main js file automatically inside app folder i
19. least one zone O 2012 Kalitte Section can be considered as row of basic html table It contains zones which can be considered as column of basic html table Please note dashlets are placed inside zones and layouts are responsible for updating positions of dashlets USING READY TO USE LAYOUTS Dashboard supports three different layout types Each layout has different HTML structure Layout Type Description TableLayout Uses a HTML table dom object tr nodes are sections and td nodes are zones of the layout You can use any table dom properties such as colspan or rowspan RowColumnLayout Sections and zones are HTML div nodes AbsoluteLayout Allows dashlets to move freely in dashboard Dashlets can overlap each other and move pixel by pixel MainLayout Like TableLayout but uses div tags inside of tr and td Use both for desktop and mobile Here is an example i require klt dash provider Manager klt dash model DashboardModel klt core when klt dash layout TableLayout klt dash provider JsonRest JsonRestProvider function Manager DashboardModel when TableLayout Define a table layout var myLayout new TableLayout Define your sections sections mySectionl Define your zones zones myZonel Style property for zone dom style backgroundcceolcorui red Custom attributes partes id myZone An other zone myZone2 style Nbackground colont plue
20. method checks if an instance for the requested provider is created before If so existing instance is returned If not a new instance is created DEVELOPING NEW PROVIDERS Out of the box JsonRest provider is ready to use and most of time will be enough for your requirements Although when needed you can develop your own provider by starting from scratch or inheriting JsonRest provider and override its methods To start from scratch use k1t dash provider ProviderMixin define klt core declare klt dash provider ProviderMixin klt dash provider Manager function declare ProviderMixin Manager var providerClass declare klt dash provider MyProvider Eeer eigtl E implement your provider PANE 2012 Kalitte getDashboard function id saveDashboard function dashboard D I Manager register MyProvider providerClass return providerClass See k1t dash provider ProviderMixin class for the list of methods that your provider should support WORKING WITH DASHBOARDS Client providers support creating retrieving updating and deleting CRUD dashboards klt dash model DashboardModel is the base class which represents a dashboard After retrieving a dashboard it can be displayed using k1t dash ui DashboardView class CREATING NEW DASHBOARD To create a new dashboard you need to create a DashboardModel instance set its properties and use createDashboard meth
21. n t i this loadFeeds value FINALIZING RSS DASHLET Now we are ready to implement a complete Rss dashlet viewer js define dijit WidgetBase ERR 2012 Kalitte dijit TemplatedMixin klt core declare dojo text resources template htm function WidgetBase TemplatedMixin declare template return declare WidgetBase TemplatedMixin templateString template renderFeeds function feeds Hi b _setRssUrlAttr function value loadFeeds function feedUrl var api https ajax googleapis com ajax services feed load v 1 0 amp callback amp q encodeURIComponent feedUrl amp output json xml var self this Display busy indicator self context setBusy Retreiving feeds getJSON api function data self context clearBusy if data responseStatus 200 self urlNode innerHTML feedUrl self renderFeeds data responseData else console error Error loading feeds using feedUrl 1 D I startup function i this inherited arguments var rssUrl this context config get rssUrl tes lessa return this context openEditor else this loadFeeds rssUrl EKER 2012 Kalitte Test Dashlet http feeds feedburner com GDBcode format xml Save Apply Cancel Hello from Dijit Widget Google UO 2012 that s a wrap Google launches new developer education programs
22. require klt core Stateful klt core declare i function Stateful declare Subclass klt core Stateful var MyClass declare Stateful 2o08 ut _fooGetter function return this foo Se fooSetter function value this foo value mr Create an instance and set some initial property values myObj new MyClass EONS es Watch changes on a property myObj watch foo function name oldValue value Do something based on the change Get the value of a property myObj get foo IU 2012 Kalitte Set the value of a property i myObj set foo bar DE More information about stateful objects can be found at http livedocs dojotoolkit org dojo Stateful DEFERREDS AND PROMISES klt core Deferred is used as the foundation for managing asynchronous threads Use this class to return a promise that gets resolved when the asynchronous thread is complete In order trigger a callback to occur when the thread is complete the then method is used As well as the thread can be informed to cancel itself by using the cancel method If the thread has completed then the then callback will be executed immediately require klt core Deferred function Deferred var deferred new Deferred function reason do something when the Deferred is cancelled Ne do something asynchronously provide an update on progress deferred p
23. this key EE 2012 Kalitte Create a button this domNode document createElement button this domNode innerHTML Change Title var self this this domNode onclick function var oldTitle self context title use set function to change a property value self context set title Title changed by me Cons oOlhepein kore handed Ae gem LEE skis Auen let self context title Test Dashlet Change Title After clicking Change Title button title property is updated but also as a side effect title of dashlet is changed Title changed by me Below table lists key members of DashletContext class Member Description J module Reference to the Dash1etModuleModel object J model Reference to the DashletModel object J pane Reference to the DashletPane object in which dashlet is located J title title of dashlet id Unique id of dashlet Note this is the unique identifier used by client provider not the dom id J paneConfig Reference to the Conf igModel object which holds pane configuration values I config Reference to the ConfigModel object which holds dashlet configuration values 43 publish Publishes a topic Wrapper for messageBus publish 43 subscribe Uses messageBus Subscribe function to subscribe to a topic When EW 2012 Kalitte context is destroyed user removed the dashlet or dashboard unloaded automatically removes the subscription subscribeToDashlet
24. your favorite database server to store dashboard data More information about how to install and configure Asp Net MVC can be found inside Working on Server Side section FEATURES SUMMARY Below is a summary of list of features DD has or supports e Modern Javascript HTML5 CSS3 based browser independent client library which lets you to easily integrate DD into your application or product e Asp Net support for Windows J2SE support for all platforms e Loosely coupled architectural design which provides high level customization both on server and client side KS 2012 Kalitte e Premise and cloud support e Ready to use for Microsoft SQL Server Oracle and MySQL databases e Database independent architecture which lets you to use your favorite database server e Mobile support for iOS Android and Windows e Modular dashlet development using AMD Asynchronous Module Definition format e Unlimited dashboard layouts including table row column based and absolute positioned e Theming also supports custom styles and templates e Ready to use open source dashlet library BEFORE YOU START Before going further if you are new to JavaScript development we recommend you to setup a development environment and use helper tools JAVASCRIPT IDES If you are a Microsoft Net developer you may prefer using Visual Studio 2010 and upper versions Visual Studio 2012 is recommended for JavaScript development for JavaScript deve
25. 00_Head1 gt lt link rel canonical href http msdn microsoft com en us library bb250446 v vs 85 aspx xmins http www w3 org 1999 xhtml gt E title t Fiddler PowerToy Part 1 HTTP Debugging lt meta http equiv content type content text html charset utf 8 xmins http www w3 org 1999 xhtml gt lt meta name DCS desuri content en us library bb250446 d lightweight en us v vs 85 aspx xmins http www w3 org 1999 xhtml gt lt meta name NormalizedUrl content http msdn microsoft com en us library obb250446 d lightweight en us v vs 85 aspx xmins http www w3 org 1999 xhtml meta name VotingContextUrl content http msdn microsoft com en us library bb250446 en us v vs 85 aspx xmins http www w3 org 1999 xhtml gt i meta name MN content D1DC116E 12 15 25 AM xmins http www w3 org 1999 xhtml gt meta name Search ShortId content bb250446 xmlns http www w3 0rg 1999 xhtml gt meta name Ms Locale content en us xmlns http f www w3 org 1999 xhtml gt link rel stylesheet type text css href http i3 msdn microsoft com Combined css resources 0 LibraryView 0 Msdn ImageSprite 0 MSDN Header 1 FeedbackCount QUICK START TODO USING MVC DASHBOARD INSIDE DD In this section core classes and approaches used inside DD are discussed If you are new to JavaScript for now we recommend you just have an idea about t
26. 2 Kalitte JAVASCRIPT CLIENT PROVIDER This layer is implemented using Javascript and responsible to provide dashboard data to UI Javascript Library It is completely up to the implementation of client provider how to provide dashboard data to UI layer Jsonrest provider kIt dash provider IJsonRest IJsonRestProvider can be used to communicate with restful json data sources You can also develop your own client provider by implementing k t dash provider ProviderMixin SERVER LIBRARY Server library includes ready to use restful json data sources and designed to be database independent Server library is responsible to provide update metadata which may include dashboard definitions and dashlet modules and instances ABOUT ASP NET SUPPORT If you prefer Microsoft Windows on your server we provide a fully featured Asp Net MVC application Asp Net MVC 3 is officially supported and you can use Microsoft SQL Server MySQL or Oracle as your database server If you want to develop new provider to access another data sources or web services see Working on Server Side section ABOUT JAVA SUPPORT We provide a fully featured Java Web Application with Restful service You can use MySQL as your database server ABOUT DATABASE PROVIDERS Server library is designed to be database independent and currently there are three providers implemented for Microsoft SQL Server MySQL and Oracle You can also implement your own provider register it and use
27. Google Compute Engine Computing without limits Big updates to Apps Script Loaded from http feeds feedburner com GDBcode format xml DH DI More information about dutt can be found at e http livedocs dojotoolkit org dijit index e http livedocs dojotoolkit org quickstart writingWidgets USING BACKBONE VIEWS As an altarnative you can use Backbone views to create dashlets Below is an example of a dashlet using Backbone views define require function require return function params Create an initial dom node this domNode document createElement div Define a templat var template hl lt title gt c hl ebr Zant A lt i gt lt content gt lt i gt Get resource paths var backboneScriptPath require toUrl Backbone js var underscoreScriptPath require toUrl Underscore js var self this Load resources and create backbone view Backbone needs underscore js so load underscore js first require underscoreScriptPath function 2012 Kalitte require backboneScriptPath function Define a backbone model var simpleModel Backbone Model extend defaults title Backbone Dashlet content I am a backbone view OP Define a backbone view var BackboneView Backbone View extend Set dashlet dom node as el object el self domNode Create instance of model model new simpleModel Set
28. SHBOARD DashboardView createDashlet method is used to create a dashlet instance and add it to the dashboard i createDashlet function model createDashlet method takes a DashletModel object and uses this object to instantiate the dashlet instance and put it inside dashboard Before adding a dashlet to the dashboard a dashboard instance should be loaded using DashboardView load method require klt dash ui DashboardView klt dash model DashletModel klt dash core designMode klt core when klt domReady i function DashboardView DashletModel designMode when set designMode to designMode dashboard or designMode full var view new DashboardView designMode designMode full node view startup load dashboard with id 206 when view load 206 function as an alternative to uniquely identify a module you can use ERD 2012 Kalitte getDashletModuleByPath use module path getDashletModule use id var query view provider getDashletModuleByTitle Rss Reader when query function module var instance new DashletModel module module when view createDashlet instance function console info Instance added to dashboard function err console error err function err console error err function err console error err Fi DEVELOPING DASHLETS Previous section demonstrated d
29. User Manual This help file includes the following information introduction to Dynamic Dashboards Framework How to articles and samples Karitte 1 490312 2101088 p 90 312 210 1089 METU Technopolis Technology Development Center 112 Ankara T rkiye www dynamic eno dynamicdashboards net Copyright 2012 Kalitte Pr i ofessional Information Technologi ies Ltd Co TABLE OF CONTENTS Getting Stante EEN 5 eekleg e UE 5 Installation TODO e 5 Tee lee D 5 NIME E RIesdSrc 5 EVA ET 6 eer LIDRARY me M Siee 6 Feat res Sumirialy stri eee be ERE FEEXR MER ERE ERE EPA EEASR UC RIRSEEORRERRRARR ESAME e TAATA EEE RIENE EN A EAR SEENTE 6 Betore VoU Starten LE 7 EVEN H Beleg EE H EIERE ege dee ege Eege T 12 Usine MVE Dashboard sraa 12 GT D KR 12 About n ppc P 12 Object Oriented El EE 14 Keel ented 16 IRC EEN EE 17 MICE OD M 18 EERDESDUITI C H 19 Working with Client Brovldere 8 itineri eter iet ENEE REESEN KENE FE Va ago er Ron aea Pe ET 20 Creating Client Provider Instance erre eerte ern iae e aeo Gaara raa neo Fara kar rna gege
30. al object k1t dash defaults dashlet paneConfig andif exists mixes it to the configuration object After DD looks defaults dashlet paneConfig property on dashboard object and if exists mixes it to the configuration object Next paneConfig property of dashlet module is checked and if exists mixes its value too Finally paneConfig value of dashlet instance is mixed context is set and pane object is created This lets you to globally set default pane properties able to customize them on dashboard module and finally dashlet level Se klt dash klt dash klt dash defaults klt dash defaults klt dash defaults dashlet klt dash defaults dashlet k1t dash defaults dashlet paneConfig iconBoxHidden true Above code sinippet sets a default value for iconBoxHidden property of dashlet pane This lets you to globally hide icon box node of your dashlets automatically Please note default values are only applied before pane instance creation require klt dash provider Manager klt dash model DashletModuleModel klt core when klt dash provider JsonRest JsonRestProvider function Manager DashletModuleModel when var provider Manager getInstance get DashboardModuleModel object var moduleQuery provider getDashletModuleByTitle Rss Reader when moduleQuery function module set paneConfig module paneConfig set Zero Lesung Lageren eene disableMaximize
31. alary salary Fr askForRaise function return this salary 0 02 To call superclass methods use inherited in my Boss js define klt core declare my Employee function declare Employee return declare Employee override the askForRaise function from the Employee class askForRaise function return this inherited arguments 20 boss multiplier EM 2012 Kalitte elsewhere require my Employee my Boss function Employee Boss var kathryn new Boss Kathryn 26 Minnesota 9000 matt new Employee Matt 33 California 1000 console log kathryn askForRaise matt askForRaise 3600 20 More information and a detailed discussion about declare can be found at http livedocs dojotoolkit org dojo declare STATEFUL OBJECTS klt core Stateful is the base class inheriting do3o Stateful for stateful objects Stateful means e Ability to get and set properties which may have side effects e Ability to watch monitor property changes Many classes inside DD framework inherit from k1t core Stateful including DashletContext ConfigModel DashletModel DashboardModel etc This can be very useful for creating live bindings that utilize current property states and must react to any changes in properties It also allows a developer to customize the behavior of accessing the property by providing auto magic getters and setters
32. amed 1istNode renderFeeds function feeds delete child nodes while this listNode firstChild this listNode removeChild this listNode firstChild for each rss feed entry create a node inside listNode for var i 0 i lt feeds feed entries length i var entry feeds feed entries i var li document createElement li li appendChild document createTextNode entry title this listNode appendChild li MONITORING CONFIGURATION CHANGES Dijit widgets are similar to stateful objects You can use get and set functions to get and set a property value As explained before when DD is about to create a dashlet instance configuration settings are mixed with dashlet context and passed as an argument to the constructor function If you are using dijit widgets these property values are automatically mixed up with the dashlet instance Before mixing dijit calls set function implemented inside WidgetBase class This function looks up a function on widget instance in the form of setXxxAttr where Xxx is the name of the property For example if a dashlet has a configuration value named rssUrl dijit looks up for a function setRssUrlAttr If found it s called instead of directly assigning the value to the dashlet instance H called automatically during instance creation and J after calling set rssUrl somevalue i SetRssUrlAttr function value if instance started load feeds eee Deh
33. arams context this domNode document createTextNode Hello world this startup function require resources js JavaScript function multiply Eelere beet MSN II Note that when startup function completes module may not be loaded Second alternative is setting a dependency to the module as below define resources js JavaScript function multiply return function params this context params context this domNode document createTextNode Hello world this startup function eene fox muris Ara EMEN EK 2012 Kalitte If the requirement is load the module conditionally you can use the first solution If the module is a part of your dashlet and should be loaded always second way is the best AMD loader can also be used to load non AMD code by passing an identifier that is actually a path to a JavaScript file The loader identifies these special identifiers in one of three ways e The identifier starts with a e The identifier starts with a protocol e g http https e The identifier ends with js When arbitrary code is loaded as a module the module s resolved value is undefined you will need to directly access whatever code was defined globally by the script Below is a sample non AMD formatted JavaScript file i var MySimpleMath function return muilsesispss e function Ns var res 1 for var i 0 i
34. as object Object i Started editor for Test Dashlet E 2012 Kalitte Below table lists key members of DashletEditorContext class Member Description dashletContext Reference to the context of dashlet config Reference to the config object of dashlet context Shortcut for dashletContext config editView Reference to the DashletEditView object This is the container object for dashlet editor MANAGING DASHLET CONFIGURATION DD lets you to manage configuration values for your dashlets You can set a configuration value and retrieve it later DashletContext and DashletEditorContext objects both have a property named config which refers to a ConfigModel object Since ConfigModel class inherits from k1t core Stateful you can use this property to set get and watch property changes Below code snippet shows source code of sample editor module EI define function j return function params set context this context params context create dom elements var form document createElement form var row document createElement p this rssUrlTextbox document createElement input this rssUrlTextbox type text this rssUrlTextbox placeholder RSS Url row appendChild this rssUrlTextbox form appendChild row this domNode form get rssUrl configuration value from config object If there exists no configuration value return this rssUrlTextbox value this co
35. ashlet module It s up to the provider what to do when deleting a dashlet module which has dashlet instances require klt dash provider Manager klt core when l klt dash provider JsonRest JsonRestProvider function Manager when JsonRest l var provider Manager getInstance Delete dashlet module by id when provider deleteDashletModule 70 then function logic on success function AAkaarze em Ze DASHLET DEVELOPMENT In this section we will be covering of dashlet development model and common scenarios HELLO WORLD DASHLET SETUP CLIENT ENVIRONMENT PI 2012 Kalitte Since DD Dashlet modules use AMD format we need to use an AMD compliant loader to load modules dynamically Although you may prefer to use other AMD loaders Curl RequireJs or bdLoad we recommend you to use Dojo AMD Loader More information about Dojo AMD Loader can be found at http livedocs dojotoolkit org loader amd To setup a development environment Create a web application using your javascript IDE Create a folder named Scripts inside your web application Copy DD files inside Scripts folder B ow mp Add following script tag lt script Suo semitis lox id ata dojo config async true packages klt dashlets script SETUP SERVER ENVIRONMENT TODO DEVELOP YOUR DASHLET Inside Scripts folder create a folder named dashlets Inside dashlets folde
36. board by id when provider deleteDashboard 233 Handle deffered object function logic on success function logic on fail DISPLAYING DASHBOARD klt dash ui DashboardView class is responsible for displaying a dashboard DashboardView constructor takes two parameters new DashboardView Object params DomNode String srcNodeRef params contains the initialization parameters srcNodeRef is the id of the dom node you want to place the view This parameter also accepts the dom node itself instead of its id If not specified default provider is used by DashboardView You can set a provider using params object require klt dash provider Manager klt dash ui DashboardView klt dash provider JsonRest JsonRestProvider l klt domReady function Manager DashboardView var jsonRest Manager getInstance JsonRest var view new DashboardView provider jsonRest node PLN 2012 Kalitte To get a reference to the active provider which DashboardView uses you can use DashboardView provider property Below code snippet uses getAl1Dashboards method of default provider to get a reference to a DashboardModel object and Load method of k1t dash ui DashboardView i div id dashboardContainer gt lt div gt script type text javascript gt require klt dash provider Manager klt dash model DashboardModel klt core when k
37. dified localhost 6811 264B 3 GET unload js Not Modified localhost 6811 15KB Hg GET aspect js 304 Not Modified localhost 6811 2 6KB GET connect js 304 Not Modified localhost 6811 5 6 KB GET dom geometry js x t Modified localhost 6811 8KB GET Stateful js 3C t Modified localhost 6811 3 1KB GET Destroyable js 304 Not Modified localhost 6811 11KB GET dom prop js 304 Not Modified localhost 6811 2 5KB You can use Net tab to observe network traffic of your application Any single request and its result will be listed here WEB DEVELOPER Web Developer is a plug in that has many development features 2012 Kalitte When you add Web Developer to Firefox a tool bar will appear In Disable menu of bar there is an option called Disable Cache Be sure it is checked when you are developing with JavaScript amp o localhost 6811 Features De vd Disable Cache v Disable Java Disable JavaScript gt Disable Meta Redirects v Disable Minimum Font Size Disable Page Colors Disable Popup Blocker Disable Proxy Disable Referrers FIDDLER Fiddler logs all web traffic between client and internet Here is a general view of Fiddler D Prom File Edit Rules Took View Help Donste C Ap Replay K gt Resume Stream D Decode Keep All sessions G Any Process A Find H Seve ER B Browse Q Clear Cache S TestWisard GE ene MSDN Search pp E onire x genea B recons n Lise commen rins Eloa E meara Header
38. display no Style Computed Layout DOM body div dl dt dd li hl h2 h3 h4 h5 h6 pre form fieldset input textarea p blockquote th td margin 0 Site css line 9 padding 0 F E html body Site css line 2 merein 3 padding 9 I body reset css line 37 font size lem merein 3 Inherited from html js html Zont 038 Heleetias Beinl Site css line 16 HTML tab view helps views source code and also allows you to edit html code of the page Any changes will effect browser in real time You can also edit style definations If you use button you can select any html element from browser by using your mouse and display it in HTML tab ele zl CSS Script DOM Net Source Edit H ResizeHandle css Wiat r3px z index 20 dijitRtl dojoxResizeHandle background image url icons resizeRtl png float right left 0 right auto H dojoxResizeNW cursor nw resize dijitRtl dojoxResizeNW cursor ne resize H dojoxResizeNE x m Above screen shot is CSS tab of Firebug You can browse and edit style sheet file here 2012 Kalitte 0p gt Console HTML CSS Script DOM Net 680 P Use lt number gt to go to line i all Test gt startup lt lt notify lt complete lt callback lt notify lt comple
39. dow gaq Object t F p 0 Ma function more ps gat Object w false D F 1 more E dashboard Widget kit dash ui Dashboard myDashboard _attachPoints 4 _attachEvents 0 inherited more digit Object scopeName dijit registry form more dojo Object config global window dijit more dojoConfig Object isDebug true parseOnLoad true foo bar dojox Object scopeName dojox collections mdnd more gaGlobal Object hid 1954691471 i 3 kit Object dash core ui more app Object href http localhost 6811 Features Dashlet Test pageMask div pageMask pageBusyContainer div pageBusyContainer more core Object dictionary function application function CookieManager function more F dach Nhiartt mit 31 modal f 1 DronManseer 1 mara Every single dom object of your app will be listed in te DOM tab You can browse dom object in their own hierarchy ER M j x 5 gt Console HTML CSS Script DOM Net p 300 ik Clear persist 1 AW HTML css Js ap Images Flash Media GET when js 304 Not Modified localhost 6811 851B E 180ms GET Evented js 304 Not Modified localhost 6811 643B 15ms GET config js localhost 6811 11KB 30ms GET xhr js localhost 6811 9 3KB GET touch js localhost 6811 1 9KB GET string js 304 Not Modified localhost 6811 2 3KB GET cache js Not Mo
40. e eo RF eege Ee Eege Eege 48 S tting Pane HO DEELER EDS EE aeebiahi sawn dues iadnnanasncesuntssacenanscanndaetensset 49 Working with Pane Commande 51 Working With L vouts enraiar neie neeaae eE ea a E E E arane ae EEr Eike ienris 54 About Layouts And Dashlet Position cccccscccccecsesesssseeececsesesaesesececeesesassesecsceeseeessesececeeseaasaesecsceeseeaaeseeees 54 Using Ready To Use Layouts enne srianan iian niina sisse riana a daian esta rada aiena RE anaa sss aiei 55 Developing New Lavouts nennen enne nenhnnnn nnns en entia snae ss sse itera daas ases estara gas a ases essa ta asa assa essa na 57 Working Witli T EI 58 Retreiving Themes and Styles i ee Irt eoru coreano bevor sd evens evade caeco aea esteso Diese eee base tesa iaeiae 58 Changing TEME RATED ERRORES DERE 59 Persisting Selected Theme and Style iere ertet run re tt euren nh vehe rna nee PR FEe Ree Vua ENN Fea eu RA ER ENEE dE 59 Responding to Theme and Style Changes nnne nnne nnnn sse en nre na sias esent naga sa assa ensi 60 Developing New Thermies cicer eegne oe ah Rar epa Eee rhe a ren eege ERR FCR FUR rax FC Eae ZEN 60 Working With Server Siderne sirsenis Feo rre da kt Free eR E Eee FEED Fe pU RE re FE ARR RR QR T Le ERERURR PATE CHF Ce EEN age Rd eR Yd 62 How to Configure ASP NET MVC Application eene enne enne nnne nennen nnne nnne nns 62 Configure Server Side With Java riiiceisccie eise eint e eerie Elec RE oe Ran Fiera den tae e Farb eese DESEN C
41. ed BEER ERE CER Ce dE ER Ue age VASTE 30 Creating a Test Dashboard nr erroe harena trc y ea EE EPA RE RR REX ER TER VER saa UR ER ERRAT ERRARE VERF dee eg 31 Adding Dashlet Instances To DaShb0ard cccccccccccssssssssesececsesssecesececeeseeaecesecsceeseseesesesscessesaeaeseeseeeseeeaeeeeees 31 Developing Dashlets rrr erre ted rani R en rro e raya a p teo re EP E Fa Fee ge a EUR VE PER DEES EES ER ERR VER e ENEE 32 Dashlet DOM Structure and Lifecycle c ccccccssssececececssseaseeeececsesseeseeeeecessesaeaeseeeeeseeeeaeseeeeeseeaeaeseeeeeeeesea 32 Working with DashletContext 5 5 er retento naro eer ao neenon ki eon E a nae Ras ERR C KR ne EN ERR YS Saaseavnsdeandend s 33 Working with Dashlet Editors oreet en eo prata ves aeo Eae nd e eee raa Ro nde kon cease o EE oda sd ipa E ERE Can 35 Managing Dashlet Configuration iascia ae aaa a aaan aa aeaa AES aED 37 Setting Initial Configuratio e ih cinere eaae eue E EA ea ea AEE EE E ERARE 39 Advanced Ree 40 Using Javascript Template Engines deser conor eta na aaa si eaa aaaea a aaa Rd E EARS 40 Usinge Dijit le c 40 O 2012 Kalitte Using Backbone VIGWS s cons ina onec ti nha eva Lua a eee SOEN Cena RR RA PARERE E E E SEENEN e 44 Loading Resources On Demand 45 Loading CSS Ee dE ul 46 Loading JavaScript Files Dvpnamtcalwy eene nennen enne nnnnnn nnns en tern nnns asiste ranas sse nn a 47 Customizing Dashlet Pane eter eerte e b n een eeg
42. efines a single function define that is available as a free variable or a global variable The signature of the function l define id dependencies factory The first argument id is a string literal It specifies the id of the module being defined This argument is optional and if it is not present the module id should default to the id of the module that the loader was requesting for the given response script When present the module id MUST be a top level or absolute id dependencies The second argument dependencies is an array literal of the module ids that are dependencies required by the module that is being defined The dependencies must be resolved prior to the execution of the module factory function and the resolved values should be passed as arguments to the factory function with argument positions corresponding to indexes in the dependencies array The dependencies ids may be relative ids and should be resolved relative to the module being defined In other words relative ids are resolved relative to the module s id and not the path used to find the module s id factory The third argument factory is a function that should be executed to instantiate the module or an object If the factory is a function it should only be executed once If the factory argument is an object that object should be assigned as the exported value of the module EXAMPLES Assume we have a file named chartDashlet js define
43. em ServiceModel Activation Version 4 0 0 0 Culture neutral PublicKeyTokenz31b3856ad364e35 System Web Routing UriRoutingModule System Web Handlers ScriptModule System Web Extensions Version 4 0 0 0 Culture neutral PublicKeyToken 31bf3856ad364e35 2012 Kalitte CONFIGURE SERVER SIDE WITH JAVA You can deploy Dynamic Dashboard Java Rest Service by using Apache Tomcat Prerequisites Apache Tomcat 79 Java Runtime Environment 6 0 and MySQL 5 54 e Install Apache Tomcat 79 32 bit 64 bit Windows Service Installer Java Runtime Environment 6 04 and MySQL 5 54 e Open Apache Tomcat Manager Page You can find this URL in start menu Apache Tomcat 7 0 Tomcat7 folder e Scroll to War file to deploy section Select Dynamic Dashboard Rest Service war file then click deploy rr Apache ftware Foundation http www apache org Tomcat Web Application Manager ao OK Undepioyed application at contest path Tescservicel List Appiicabons HTM Manager Heip Manager Help Server Status stan Stop Reload Undeploy f None specified Welcome to Tomcat tue 1 Expire sessions win idie 28 minutes start Stop Reload _Undepioy None specified Tomcat Documentaton rue D Lessel L Gesseses JL ate 30 minutes stat Stop Reload Undepioy Emre sessions TJ ae 30 minutes Sun seo Leed docs examples hostmanager None specified Tomcat Host Manager Applicaton tue D Bore sess
44. emove share share about about edit edit menu menu refresh refresh visualState visualState Use above command constants to get a direct reference to known commands used by DD require klt dash core DashletCommand function DashletCommand var removeCommand DashletCommand remove E ERR 2012 Kalitte SETTING INITIAL PANE COMMANDS Before DD prepares initial commands for a dashlet kIt dash dashlet commands prepare topic is published You can use event args commands value to get a list of commands created by default for dashlet and modify this list Below is a sample dashlet demonstrating how to set initial commands klt dash core DashletCommand klt dash core CommandName function require DashletCommand CommandName return function params this context params context var self this this domNode document createElement div this domNode innerHTML Test Dashlet this context subscribe klt dash dashlet command prepare function event if event sender this var commands event args commands reset commands array commands length 0 var removeCommand DashletCommand create CommandName remove removeCommand ui hideLabel false var myCommand DashletCommand create myCommand label Hello World type custom pals 4 neon ass eel ene eb ess hideLabel false corners all II
45. ented as below this set function name value if name rssUrl this setRssUrl value SETTING INITIAL CONFIGURATION An initial configuration may be set before a dashlet instance is created You can set initial configuration e Manually passing to the DashletModel constructor e Automatic using dashlet modules USING DASHLETMODEL CONSTRUCTOR Below code snippet shows assigning default configuration to DashletModel instance i var instance new DashletModel module module Gumi wees ee eg e EE eet eet USING DASHLET MODULES Another way to set initial dashlet configuration is using dashlet modules and using DashletModuleModel dashletConfig property var pathToRssModule klt dash dashlet RssReader RssReader var cnnRss new DashletModuleModeli path pathToRssModule Pielke NNIESSIU dashletConfig East o Waco 3 Sio ein COSTA mas chlici em mse r metaData description Rss data from Cnn II var googleRss new DashletModuleModel path pathToRssModule title Google Code Rss dashletConfig EEDI E rssUrl ds feedburner com GDBcode format xml EN 2012 Kalitte metaData description Rss data from google code blog As above code snippet shows two dashlet modules use the same AMD formatted module file but have different configurations This can be very handful if you want to provide your users pre config
46. evelopment of a simple dashlet Although for basic scenarios that will be enough to have a module file and return a function complex scenarios will generally require detailed solutions DASHLET DOM STRUCTURE AND LIFECYCLE When a new dashlet is about to be created by DD following steps are performed 1 Dashlet module file is loaded by AMD loader and return value is retrieved An AMD formatted dashlet module should return a function as a result and return value of the module should be the constructor function A new dashlet instance is created passing initialization parameters to that function 3 domNode property of dashlet instance is examined and if exists it s placed to the body node of dashlet pane 4 After dom hierarchy is created and dashlet is displayed to the user startup method is examined If dashlet instance defines a function named startup it s called within the context of dashlet instance When user wants to remove the dashlet instance from dashboard DD looks for a function named destroyRecursive If you need to do some type of garbage collection for your dashlet instance this is the best place Below code snippet shows startup and destroyRecursive functions for Hello World dashlet define function return function this domNode document createTextNode Hello world ERR 2012 Kalitte this startup function console info Dashlet is started b this destroyRecur
47. ge UP WW TO pm PEF s gO jE EE EE e Mr KM A E EE vo D Package Explorer 3 UMP e Organize v Include in library v Share with Burn New folder 3 testprovider T 9 sre main resources Qv E roe p testprovider WEB INF Ja Hr Favorites Name 9 src main java RE Desktop J classes BBA JRE System Library J2SE L5 Organize Gj Open Incldeinlibrary v Sharewith v Bum Ji Downloads B A Maven Dependencies ox did m Referenced Libraries db Favorites Name Hil Recent Places DispatcherServiet serviet se f target a puni a Ges T Libraries Siwe amp maven archiver E what ER Documents lr ict dans 3j Recent Places pude testprovider di etc d Music META INF Ji Berkay Ki isel E Pictures ES WEB INF Jo Kalitte Dashboard E videos E classes Ji KalitteBi X webxml Es Computer D indexjsp go ver La Libraries J testprovider war 7 Documents ii Network D pomxml a Music E Pictures Subversion Bl Videos amp Local Disk C i Network Open DispatcherServlet servlet xml and replace class of dataProvider bean with your custom dataprovider ER 2012 Kalitte 73 Class org springtramevork http converter ByteArrayHttpMessageConverter gt lt bean class org springframevork http converter StringHttpMessageConverter gt lt bean class org springframevork http converter ResourceHttpMessageConverter gt lt bean class org springframevork http converter xml SourceH
48. hese concepts When you start developing dashlets these concepts will be simpler to understand and use ABOUT AMD MODULES DD uses AMD format for both its internal modules and dashlets The Asynchronous Module Definition AMD API specifies a mechanism for defining modules such that the module and its dependencies can be asynchronously loaded This is particularly well suited for the browser environment where synchronous loading of modules incurs performance usability debugging and cross domain access problems THE PROBLEM AND SOLUTION The overall goal for the format is to provide a solution for modular JavaScript that developers can use today It was born out of Dojo s real world experience using XHR eval and proponents of this format wanted to avoid any future solutions suffering from the weaknesses of those in the past The AMD module format itself is a proposal for defining modules where both the module and dependencies can be asynchronously loaded It has a number of distinct advantages including being both asynchronous and highly flexible by nature which removes the tight coupling one might commonly find between code and module identity Many developers enjoy using it and one could consider it a reliable stepping stone towards the module system proposed for ES Harmony KR 2012 Kalitte Today it s embraced by projects including Dojo 1 MooTools 2 0 Firebug 1 8 and even jQuery 1 7 API SPECIFICATION The specification d
49. ies type of command A value of builtin visualState and editState is automatically handled by DD location Specifies user interface location of command If set to menu command is created inside dashlet menu If set to header command is displayed on header of pane If location is set to header specifies if command is created on left or right side of header A value of means left r means right Specifies an object which is applied to the user control of the control 2012 Kalitte Below is an example of a sample command name testCommand label Hello World type custom location header float r ui iconClass d icon arrow u title Click to see the result CREATING COMMAND OBJECTS Although you can directly create a javascript object for a command using create method of klt dash core DashletCommand singleton is recommended Create method checks the name of your command with the existing commands and assigns default properties for the new command require klt dash core DashletCommand function DashletCommand var myCommand DashletCommand create myCommand label Hello World type custom puto 2 giconed ass diconcsetresh hideLabel false You can use klt dash core CommandName singleton to get built in command name constants none none maximize maximize collapse collapse restore restore expand expand drops drop remove r
50. io Dalee baeo ern 67 Create Custom Dashboard Provider With Java sees nnne en nnne nnne nns 68 O 2012 Kalitte GETTING STARTED PRODUCT OVERVIEW Kalitte MVC Dashboard lets you to add fantastic looking HTML5 based end user customizable dashboards and dashlets to your application with ease You can integrate DD into your product develop your dashlets and let your users design their own dashboards INSTALLATION TODO e Using with Asp Net e Using with Java ARCHITECTURE DD includes three layers Y Fully featured HTMLS CSS3 based UI JavaScript library Y Javascript Client Provider Y Server Application Asp Net MVC amp Java Database Providers for SQL Server Oracle and MySQL Asp Net amp Java Classes User Interface Classes Authentication amp Authorization Utility Classes Database Providers Client Data Providers Client Provider Database Provider UI JAVASCRIPT LIBRARY Javascript library includes user interface This is the layer which is responsible to retrieve dashboard data i e list of dashboards dashlets inside a dashboard and dashlet positions etc using active client provider and display dashboard and dashlets to end user Layer also has utility classes interfaces mixins ready to use dashlet library You can directly use those classes extend them or easily integrate them into your application More information about each class in JavaScript library can be found at API documentation O 201
51. ion creating application instance created application Initializing it GET http localhost 6811 api Dashboard GetAllDashboards 200 OK 256ms i GET http localhost 6811 api DashletModule GetAllDashletModules 200 OK 30 ims spp inited Signalling ready signal Ox Use Arrow keys or Enter Q sess this addEventListener gt gt gt testhis alert Qrefere this applicationCache tethis Etoh gt gt gt this a x owernenps me zzi kernel js line 221 ready js line 8 main js line 13 main js line 15 xhr js line 196 xhrjs line 196 application js line 65 readyjs line 11 Test line 184 Lm with _ tvar line 2 This is Firebug console tab You can observe every browser feed inside i e errors warnings network communications etc You can also use command line to run custom javascript codes s3 sl HTML css Script DOM Net E EI Edit body claro lt htmljs G lt table id pageTable cellspacing 0 cellpadding 0 gt lt div gt div id pageFooter gt E lt div class inner gt E lt div gt lt p gt amp copy 2009 2012 Kalitte All rights reserved lt p gt B lt p gt Visit lt a target _blank href http www dynamicdashboards net gt www dynamicdashboards net lt a gt for licensing options lt p gt lt div gt lt div gt lt div gt footer lt footer gt pageBusyContainer style
52. ions umidezoo minutes manager esisenice None specifed Sende and JSP Examples tue 1 san Stop Reload Undepioy UNS ria Dn m S stan Sto Fersa Uncepioy E p C Emre sessions Je ice 7 minutes None specited Archetype Created Web Application ue D Conte Path required XML Configuration fie URL WAR or Directory URL Seiect WAR fie to upload EDesktopiKallt DynamicDashboardwar Browse Loser e Ifyou get org apache tomcat util http fileupload FileUploadBase SizeLimitExceededException error go to Apache Tomcat 7 0 installation folder Now go to webapps manager WEB INF folder Open web xml in notepad Replace the upload size value with larger value then size of war file and try to deploy war file again lt multipart config gt lt SOMB max gt lt max file size gt 524288000 lt max file size gt lt max request size gt 524288000 lt max request size gt lt file size threshold gt 0 lt file size threshold gt multipart config lt servlet gt e Now if you deploy war file successfully Apache will extract this file to Apache Tomcat 7 0 installation folder webappsWfile name of war file V Navigate to this folder e Navigate to WEB INF classes folder Then open application properties file with notepad File shown in below 2012 Kalitte jdbc url jdbc mysql ServerIP 3306 DatabaseName jdbc driverClassName com mysql jdbc Driver
53. let Possible values are maximize expand and collapse Set to a known value to change the visual state of the dashlet readonly Specifies if pane is read only A read only dashlet is not editable nor draggable J disableEdit Specifies if editing of dashlet is disabled If editing is disabled edit dashlet command is hidden automatically a disableMaximize Specifies if maximization of dashlet is disabled If maximization is disabled maximize dashlet command is hidden automatically L3 disableRemove Specifies if removing dashlet is disabled If removing is disabled remove dashlet command is hidden automatically J disableCollapse Specifies if collapsing of dashlet is disabled If collapsing is disabled collapse command is hidden automatically 43 showHeader Shows pane header if it s hidden 43 hideHeader Hides pane header 43 toggleCollapse Toogles collapse 43 getBodySize Returns an object which has w and h properties for width and hight of body node 43 getEditorContainerNode Returns domNode object for dashlet editor container SETTING PANE PROPERTIES Pane properties can be set using e klt dash defaults dashlet paneConfig global object e defaults dashlet paneConfig property of DashboardView object e DashletModuleModel paneConfig property e DashletContext paneConfig property O 2012 Kalitte When a new pane is about to be created DD starts with an empty configuration object Then it looks for the glob
54. lopment For Java developers you may prefer using Eclipse Aptana or KomodoEdit For a discussion on JavaScript IDEs see http stackoverflow com questions 925219 best javascript editor or ide with intellisense and debugging possibly DEBUGGING TOOLS We recommend Firefox web browser Web Developer plug in Firebug plug in as primary development tools They improve your development comfort by easily finding and fixing bugs and detect visual problems easier You can download them by using following links e Firefox Web Browser http www mozilla org en US firefox new e Web Developer Plug in https addons mozilla org en US firefox addon web developer e Firebug https addons mozilla org en US firefox addon firebu FIREFOX Firefox is one of the popular web browsers in the world and also provides you a development environment with the help of lots of plugins FIREBUG Firebug lets you to debug javascript and analyse document structure After you install Firebug plug in to your Firefox a button will be added to your browsers toolbar Click to open plugin at bottom of your browser 2012 Kalitte e el console HTML css Script DOM Net E aeg win ew ear persist ege An Errors Warnings Info Debug Info dojox mvc APIs subject to change without notice occu dojox layout ResizeHandle APIs subject to change without notice raining for app initializat
55. lt arguments length i res res arguments i return res You can load the file as define require function require return function params this context params context this domNode document createTextNode Hello world this startup function var path require toUrl resources js JavaScript js require path function console info MySimpleMath multiply 12 5 3 CUSTOMIZING DASHLET PANE Every dashlet is placed inside a pane in a dashboard Pane is responsible to hold the dashlet instance and provide a container to the dashlet You can use context pane property inside your dashlet to get a reference to the pane object O 2012 Kalitte DashletPaneBase Class is the base class for panes and inherits from dijit widgetBase which means it has all functionality of dijit widgets Below table lists key members of Dashlet PaneBase Class Member Description 3 iconClass Specifies the css class name of pane icon iconBoxHidden Specifies if the iconbox of pane is hidden J iconBusyClass Specifies the css class to be set for the icon when dashlet is busy Defaults to ui icon busy J autoHideHeader If set true specifies if the header of dashlet is only displayed when mouse is over the pane d editState Specifies current edit state of the dashlet If set to edit dashlet editor is displayed visualState Specifies current visual state of the dash
56. lt dash ui DashboardView klt domReady function Manager DashboardModel when DashboardView Create a DashboardView instance using initialization parameters and id of container node var viewer new DashboardView id myViewer dashboardContainer call startup method viewer startup var provider Manager getInstance when provider getAllDashboards function allDashboards Get a reference to first dashboard var firstDashboard allDashboards 1 use DashboardView Load method to load dashboard model when viewer load firstDashboard function console info Loaded dashboard id firstDashboard id function err console error err b function err console error err DashboardView Load method also accepts id value of an existing dashboard Provider is used to query dashboard data require klt dash provider Manager klt core when klt dash ui DashboardView klt domReady function Manager DashboardModel DashboardView PI 2012 Kalitte var viewer new DashboardView id myViewer dashboardContainer viewer startup when viewer load 224 function result console warn Loaded dashboard id result id function err console error err DASHBOARD DESIGN MODES Dashboard design modes let you to set if a dashboard can be edited by users klt dash core designMode object can
57. m Dijit Widget lt p gt lt div gt And the output is O 2012 Kalitte Test Dashlet Hello from Dijit Widget Instead of setting templateString property inside JavaScript file you can also load it using dojo text plugin from an external file Scripts 4 dashlets 4 myDashlet 4 resources Ja template htm js b ES kit iy dojo js Assume template file is located inside resources folder you can load it as below i define dijit WidgetBase dijit TemplatedMixin klt core declare dojo text resources template htm g function WidgetBase TemplatedMixin declare template return declare WidgetBase TemplatedMixin templateString template div lt p gt Hello from Dijit Widget lt p gt lt div gt REFERENCING TO DOM NODES You can use domNode property inside your widget to reference to the root dom node of template Since DD also uses domNode property to place your dashlet to a pane dijit widgets automatically work without additional coding You can use data dojo attach point attribute to reference a specific dom node inside your template lt div gt lt p gt Hello from Dijit Widget lt p gt AME 2012 Kalitte lt ul data dojo attach point listNode gt lt ul gt lt span gt Loaded from lt span gt lt span data dojo attach point urlNode lt span gt lt div gt Below is a sample usage of referencing template node n
58. me and style id to from cookie RESPONDING TO THEME AND STYLE CHANGES To be notified about current theme or style changes use k1t core messageBus to subscribe kit dash theme changed topic require klt dash ui ThemeManager klt core messageBus function ThemeManager bus bus subscribe klt dash theme changed function event if event oldTheme console info Old theme was event oldTheme if event newTheme console info New theme is event newTheme if event oldStyle console info Old style was event oldStyle if event newStyle console info New style is event newStyle Save current theme to cookie In your app init handler you can use themeManager loadFromCookie method ThemeManager saveToCookie DEVELOPING NEW THEMES DD supports custom themes and by default uses same classes with JQuery Mobile UI You can develop a theme by starting from scratch or add new styles to existing themes To develop a new theme use ThemeRoller http jquerymobile com themeroller index php to create your theme O 2012 Kalitte Q jquerymobile com themeroller index php l 1 0 ThemeRoller i jJQuerv Version 1 colored by Suburba BD Adobe kuler Popular v D emm emp Swatch A Delete Duplicate gt Header Footer Bar Content Body LINK COLOR TEXT COLOR TEXT SHADOW g ipx 0 eeeeee BACKGROUND ecsezed
59. ment the DashboardProvider in your provider class After that you can develop your dashboard provider using the other data sources E Serna c tetpov der arelms avalcon mo onde espro de provide Reiproviderjave SpringSource Too NNNM File Edit Source Refactor Navigate Search Project Run Window Help D RH LEMMER MERTEN HE Package Explorer 13 B amp e EU D esproviderjva D i testprovider E import com kalitte dash clientModel ActionModel 9 src main resources import com kalitte dash clientModel DashboardModel 9 src main java import com kalitte dash clientModel DashletModel EB com myprovidertestprovider provider import com kalitte dash clientModel DashletModuleModel D testproviderjava import com kalitte dash clientModel DashletPositionModelList E JRE System Library I25E 1 5 import com kalitte dash clientModel TagModel d Maven Dependencies import com kalitte dash clientModel TagRelationModel BA Referenced Libraries import com kalitte dash provider DashboardProvider FR Kalitte DynamicDashboard BaseProviderjar C Users berkay Desktop E com kalitte dash clientModel diy ActionModel class diy ConfigDefaults class Lo DashboardModel class diy DashletinstanceModel class diy DashletModel class diy DashletModuleModel class doy DashletPositionModel class diy DashletPositionModelList class Aa IDomModel class diy ItemCreateResult class Aa KelitteDictionary class diy KalittePair class Lj LayoutModel class dy MetadataModel cla
60. mework ER 2012 Kalitte Client Provider Client providers are JavaScript classes which are responsible for retrieving and persisting metadata Metadata can be list of Dashboards for a user or position of a dashlet Server Provider Server providers are server side classes which are used to retrieve and persist dashboard data When a dashboard is about to be displayed on a client browser e Using Client Provider Dashboard data is retrieved and Layout is created e Dashlets which belong to that Dashboard are retrieved using client provider For each Dashlet data one DashletPane and one Dashlet is created and positioned by Layout Google Code Highcharts Dashlet Pane Market shares for a website Fri am more in Vi r goes on forecast humor Winners of the Google UO Develop for Good global hackathon Others GDG st communi ized develo Opera Fridavaram Live Tatooine Sky Bikes Safari Popularity 7617930 NN 22272252 Britain s Murray wins men s U S Open 5 Williams wins her 4th U S Open Somali lawmakers pick new president Google Map dee CO Stevens Jnsttute woken oF Technology Week 1 Week 2 Week 3 Week 4 Dashboard amp Layout Fort Greene Governors 1 Island 7 A Boerum Hill amp verileri 82012 Google Sanbo Kulladim artlar Harita hatas bildirin WORKING WITH CLIENT PROVIDERS klt dash provider Manager is the main singleton
61. myTheme CSS pathToCss styles as title default jm defaultStyle a kl ThemeManager select myTheme Below is a sample screen shot with new theme Rss Reader RSS Url View Mode Show headers only Limit Feeds Unlimited WORKING WITH SERVER SIDE HOW TO CONFIGURE ASP NET MVC APPLICATION ASP NET MVC 3 CONFIGURATION Dashboard requires some configuration to run over Asp net MVC Framework To use dashboard in your application first run metadata database script After created dashboard database successfully add required references to your project O 2012 Kalitte These are reference files Reference Description Dependency Kalitte Dashboard dll Main dashboard library Required Kalitte Dashboard Mvc dll Asp net MVC Framework Required implementation library Kalitte Dashboard MySqlProvider dll Data provider for MySQL databases Optional Kalitte Dashboard OracleProvider dl Data provider for Oracle Databases Optional Kalitte Dashboard SessionProvider dll Data provider for server session data Optional Kalitte Dashboard SglIProvider dll Data provider for Microsoft SQL Server Optional There are two different versions for MVC 3 and MVC 4 frameworks At least one data provider reference required Project references should look like this 4 fl References SR EntityFramework SR Kalitte Dashboard s a Kalitte Dashboard Mvc Kalitte Dashboard SqlProvider SR Micr
62. n 21 Developing new Providers riti pneri iiini niiae oia sanie iiiki eani ne Rp EY 21 Working With Dashboards intr rere retreat orania Rar aer kb RE YR FRE Pe UR Roa ER Vae He ER 22 Creating new dashboatd eiui tinent eap Fr rien ria area ea Reo Fir Ea RE eaa app rni aede ae PR YT 22 O 2012 Kalitte RTE UNENEE El e E E 23 Updating dashboard SPEED 23 IR Uu Et Cl ME 24 Displaying dasliDOoafltl i t oce PE rH RERO Yer Roe ERE REN Y RH E REX FERE E E ERST ERE eha ed VERRE NX EN HE NURSE ORNE 24 Dashboard Design MOGeS rernm erede eere ee eng eere Hn eun veh ees n ed eE ena Peng a ee y edes bx eee eege en vo 26 Working with Dashlet Module 26 Registering new dashlet module eene enhn nnne tine nn nnns esent tasas sare ent ta assassin nana 27 Querying dashlet modules erect ciet ecrire eni tere a rune turae to eoa Fa opu oe e a EE Peu Era EE Eno Eu e CERE Fons 28 Updating dashlet modules 28 RETTEN dee UE 29 Dashlet Developmierit acturi ere eu e en etaed ace unn eene gel emen aded Doku ru acea vene kee eege ege eege ege 29 Hello World dashlet iniret nta eee then tento esti hne ka nin ka Rash can Based a nega Fen a3 augu ce ee 29 Setup Client Environment rennen nnne tnnnnn ares enne th gasa sisse ssa ta asas isses satia daas sse s estara sans en 29 Setup Server EE HTH Seege dee EES 30 Develop Your PAIRE DL UEEx m 30 Register Your Dashlet rient enhn rrr er ee Ee ri Fre E
63. ntext config getDefault rssUrl var self this subscribe to editor validating event this context subscribe klt dash dashlet editor validating function event this refers to self context in this scope Check if the context sending validation topic is my context if event sender this this config set rssUrl self rssUrlTextbox value Ey 2012 Kalitte Test Dashlet RSS Url Save Apply Cancel viewer js define function return function params set context this context params context var self this this domNode document createElement Span this setRssUrl function value this domNode innerHTML value watch for changes this context config watch rssUrl function name oldVal newVal self setRssUrl newVal II this startup function get rssUrl value var rssUrl this context config get rssUrl 3t user didn t set a value for rssUrl open editor automatically qf return this context openEditor else this setRssUrl rssUrl Above code snippet illustrates getting rssUr configuration value and watching for changes When a configuration value is changed DD looks up for a set function on your dashlet If there is a set function it s called automatically with configuration key and value parameters ei 2012 Kalitte Same feature instead of watching context config can be implem
64. od of client provider i require klt dash provider Manager klt dash model DashboardModel klt core when klt dash provider JsonRest JsonRestProvider function Manager DashboardModel when Create new DashboardModel instance and set its properties var dashboard new DashboardModel bieles UM rirse Casioon layout table Get instance of default client provider var provider Manager getInstance Call createDashboard method of provider Use when function to handle both asynchronous and synchronous calls when provider createDashboard dashboard Handler for sucess function result console info Dashboard created successfully Assigned id is result id Optional error handler function err console errors ers PPM 2012 Kalitte Above code snippet creates a dashboard using default values QUERYING DASHBOARDS Below table lists key methods of client provider which can be used to query dashboards Member Description getDashboard Retrieves the DashboardModel object for a specific id getUserDashboards Returns an array of DashboardModel objects belonging to a specific user getAllDashboards Returns an array of all DashboardModel objects i require klt dash provider Manager klt dash model DashboardModel klt core when klt dash provider JsonRest JsonRestProvider function Manager DashboardModel when var provide
65. osoft CSharp Add following property in configSections area in master Web config file of application section i type Kalitte Dashboard Configuration DashboardSettingsSection Kalitte Dashboard i name KalitteDashboard gt It should look like this lt configuration gt lt configSections gt lt For more information on Entity Framework configuration visit http go microsoft com fwlink LinkID 237468 gt section name entityFramework type System Data Entity Internal ConfigFile EntityFrameworkSection EntityFramework Version 4 section type Kalitte Dashboard Configuration DashboardSettingsSection Kalitte Dashboard name KalitteDashboard configSections Add following property in configuration area in master Web config file of application lt providers gt lt clear gt lt add applicationName DashboardApp connectionString SqlConstr name SQLDashboardProvider type Kalitte Dashboard SQLProvider Provider Kalitte Dashboard SQLProvider gt lt providers gt lt KalitteDashboard gt Here how it should look section type Kalitte Dashboard Contiguration DashboardSettingsSection Kalitte Dashboard name KalitteDashboard gt configSections lt KalitteDashboard defaultProvider SQLDashboardProvider providers lt clear gt add applicationName DashboardApp connectionString SqlConstr name SQLDashboardProvider type Kalitte Dashboard SQLProvider P
66. r Manager getInstance Get all dashboard instances when provider getAllDashboards function Dashboards your logic here function err console error err More information about methods can be found at api documentation of client provider UPDATING DASHBOARD saveDashboard method of client provider lets you to save changes for a DashboardModel object You can use getDashboard method of client provider to get a reference to an existing DashboardModel object change its properties and call saveDashboard i require klt dash provider Manager l klt core when l klt dash provider JsonRest JsonRestProvider function Manager dashboard when var provider Manager getInstance when provider getDashboard 224 function dashboard update title property of dashboard dashboard set title My Dashboard Save changes when provider saveDashboard dashboardToUpdate function logic on success KEN 2012 Kalitte function logic on fail function err console error err DELETING DASHBOARD deleteDashboard method of client provider lets you to remove a dashboard require klt dash provider Manager klt dash ui DashboardView klt core when klt dash provider JsonRest JsonRestProvider j function Manager dashboard when Create provider instances var provider Manager getInstance Delete dash
67. r create a folder named myDashlet This folder will contain all files related with your dashlet Add a javascript file named viewer js inside myDashlet The folder structure should be like below mS Scripts 4 m dashlets Now you are ready to implement your dashlet module Copy the following code snippet inside viewer js file l define function return function this domNode document createTextNode Hello world REGISTER YOUR DASHLET To register your dashlet module use client provider i require klt dash model DashletModuleModel O 2012 Kalitte klt dash provider Manager klt core when klt dash provider JsonRest JsonRestProvider function DashletModuleModel Manager when i Create a DashletModuleModel instance var module new DashletModuleModel path dashlets myDashlet viewer title Hello World Ki Use createDashletModule method of default client provider when Manager getInstance createDashletModule module function result console info Created module with id result id b function err console error err Now DD knows that there is a dashlet module which has its module definition inside dashlet myDashlet viewer and able to dynamically load your dashlet CREATING A TEST DASHBOARD More information about creating a new dashboard can be found at Creating new dashboard section ADDING DASHLET INSTANCES TO DA
68. require baseUrl Scripts packages dojo gig dieu elo lr app kbps For more information about AMD use the following links e http www sitepen com blog 2012 06 25 amd the definitive source e https dojotoolkit org documentation tutorials 1 7 modules e http addyosmani com writing modular js e https github com amdis amdjs api wiki AMD e http requirejs org OBJECT ORIENTED JAVASCRIPT O 2012 Kalitte JavaScript uses prototype based inheritance not class based inheritance which is used by most programming languages k1t core declare which is based on dojo declare provides the ability to simulate class based inheritance in my Person js define klt core declare function declare return declare null constructor function name age residence this name name this age age this residence residence elsewhere i require my Person function Person var folk new Person phiggins 42 Tennessee The first optional parameter is a unique identifier for class Optionally you can use second parameter for inheritance Employee js define klt core declare my Person function declare Person i return declare Person constructor function name age residence salary The constructor method is special the parent class Person constructor is called automatically before this one this s
69. ription equire klt dash provider Manager klt core when klt dash provider JsonRest JsonRestProvider function Manager when JsonRest var provider Manager getInstance when provider getAllDashletModules function modules logic on success b function Aker eral EE UPDATING DASHLET MODULES saveDashletModule method of client provider lets you to save changes for a DashletModuleModel object You can use getDashletModule method of client provider to get a reference to an existing DashletModuleModel object change its properties and call saveDashletModule method require klt dash provider Manager klt core when klt dash provider JsonRest JsonRestProvider function Manager when JsonRest var provider Manager getInstance when provider getDashletModule 70 function module Update module titl K R 2012 Kalitte module set title Updated Title Get config object var config module get config Change single instance property of module config config set singleInstance false Save changes to your data source when provider saveDashletModule module Handle deffered object function logic on success function logic on fail function J dMtxejuer orar direyexol tainl DELETING DASHLET MODULE deleteDashletModule method of client provider lets you to remove a d
70. rogress update when the process finishes deferred resolve value performing callbacks with the process deferred then function value Do something when the process completes function err Do something when the process errors out function update Do something when the process provides progress information DK to cancel the asynchronous process deferred cancel reason klt core Deferredis based on Dojo Deferred For a detailed documentation see http livedocs dojotoolkit org dojo Deferred klt core when is designed to make it easier to merge coding of synchronous and asynchronous threads Accepts promises but also transparently handles non promises If no callbacks are provided returns a promise regardless of the initial value Also foreign promises are converted If callbacks are provided and the initial value is not a promise the callback is executed immediately with no error handling Returns a promise if the initial value is a promise or the result of the callback otherwise require klt core when function when KA 2012 Kalitte when someValue function value do something when resolved unction err do something when rejected function update do something on progress More information can be found at http livedocs dojotoolkit org dojo when MESSAGEBUS klt core messageBus provides a centralized hub for p
71. rovider Kalitte Dashboard SQLProvider providers KalitteDashboard lt appSettings gt add key webpages Version value 1 0 0 0 add key ClientValidationEnabled value true ER 2012 Kalitte More than one data provider can be defined here as well For example KalitteDashboard defaultProvider OracleDashboardProvider l lt providers gt lt clear gt add applicationName DashboardApp connectionString SqlConstr name SQLDashboardProvider type Kalitte Dashboard SQLProvider Provider Kalitte Dashboard SQLProvider E add applicationName DashboardApp connectionString OracleConstr name OracleDashboardProvider type Kalitte Dashboard OracleProvider Provider Kalitte Dashboard OracleProvider l lt providers gt lt KalitteDashboard gt Don t forget to set defaultProvider and connectionString properties Dashboard initializes provider which is defined in defaultProvider property That s all configuration for Web config file An api area is required to handle dashboard requests Rigth click your project and select Add gt Area from the menu Name it as api _ DI Solution MyMVC3Dashboard 1 project P p pp Build p wap Rebuild lickeyToken b77a5c561934e089 require LE Clean RI S Publish E d Run Code Analysis e Convert to Web Application lity rd SQLProvider MG Gc wi Scope to This c 4 eis P New Solution Explorer View
72. s TextView Webfoms Hexvew Auth Cooles C T peee E MM M GET HTTE 1 Cache Cache Contro max ageao bent Accept texte acelicaton stint amd appiicator xmn g 0 9 a20 8 Accept Charset IS0 8859 9 utF8 9 0 7 a 0 3 Accept Encoding gap defe sich Accept Language ES Erste Web Sessions lt lt D Rest Protect Host URL Body Caching Content Type Process User Agent Mosila 5 0 Windows NT 6 1 WOWE4 AnpleWebiit 536 11 KHTML lle Gecko Chrome 20 0 1132 47 Safari 535 13 Cookies Login 3 Cooke ben utma 100381067 1641413408 1339672673 1341236301 1341557631 6 tio 100381067 1 10 1341557831 sutme 100381067 100381067 1341235301 5 3 utmcsr socahost 681 1 tmcon referral vtmond referral lutmcct Features Dashie Test EH etSynsWew Transformer Headers Textview Imagevew MexWew WebWem Auth Cadig Cookes Raw Son XML GOO TYPE Hi PUBLIC Y W3C DTD XHTML 1 0 Tranationa EN 8 wenw w3 om TRAPtRI DTD mi anatonal dd an ww arp 1998 GE El lesser Net Dasntowd and Teams Ap Net aep net widget asp net dashboard asp net widget framework net widget et dashboard dotnet widget dotnet dashboard ajax widget ax dashboard sep net gauge ssp net webpert ssp nat drag drop asp nat EE meta nane E E hich proves a browser gen cestng aan drag dop widows ed dota EE Ap Net gt eo Deet De content et Him besate amete names clesaficaton contenta temet neme Conter
73. sh model DashletModuleModel and use createDashletModule method of client provider to save it require klt dash model DashletModuleModel klt dash provider Manager klt core when klt dash provider JsonRest JsonRestProvider function DashletModuleModel Manager when Create dashlet module model var myModule new DashletModuleModeli AMD module defination path path myApp dashlets MyDashlet MyDashletModule title My Dashlet es Create a provider instance var myProvider Manager getInstance Add module to your data source when myProvider createDashletModule myModule function logic on success function logic on fail klt dash provider Manager klt core when klt dash provider JsonRest JsonRestProvider function DashletModuleModel Manager when var myModule new DashletModuleModel path myApp dashlets MyDashlet MyDashletModule title My Dashlet Define module configuration here eem zer 4 Only one instance of a module is allowed in a dashboard singleInstance true About menu of dashlet eio cU MEET url http www dynamicdashboards net op vision bit EE Py 2012 Kalitte Define editor module path editor path myApp dashlets MyDashlet MyEditorModule QUERYING DASHLET MODULES Below table lists key methods of client provider which can be used to query dashlet modules Method Desc
74. sive function console info Dashlet is destroyed WORKING WITH DASHLETCONTEXT When a new dashlet instance is about to be created by DD initialization parameters including context is passed to the constructor of your dashlet context is an instance of DashletContext class and is the bridge between your dashlet and DD framework It contains references to the dashboard view and pane object also has helper methods and properties efine function return function params for var key in params Assign initialization parameters to the dashlet instance this key params key console info Assigned key as this key this domNode document createTextNode Hello World this startup function Get title property from context console info Started dashlet this context title Above code snippet illustrates assigning initialization parameter values to the dashlet object and getting title property of dashlet from context object Output is ssigne objec Started dashlet Test Dashlet jec Although you can directly assign values to properties of context we recommend you to use set function of Stateful class since DashletContext class inherits from Stateful Any side effects will be handled by this function define function return function params for var key in params this key params key console info Assigned key as
75. ss di ModulePropertyConfig class public class testprovider implements DashboardProvider I l Zo PermissionModel class public void DeleteDashboard String arg0 E e public DashboardModel CreateDashboard DashboardModel argO TODO A hod stub o public DashletModel CreateDashlet DashletModel arg0 TODO Auto generated method stub return null H e public DashletModuleModel CreateDashletModule DashletModuleModel argO generated method stub TODO Auti return null D SectionModel class TODO Auto generated method stub ShareModel class diy TagControlModel class kip TagModel class diy TagRelationModel class diy TransactionModel class Lo ZoneModel class P com kalitte dash provider diy DashboardProvider class e public void DeleteDashlet String argo TODO Auto generated method stub e public void DeleteDashletModule String arg0 amp META INF TODO Auto generated method stub ste target i pomami id H m public DeleteDashlets List lt String gt argO Ws H 4f Servers 23 OFE s D Console 53 ft Markers i Progress No consoles to display at this time D Ju SS Now you can build your code and then you can deploy it to server To compile your code right click on project root element and select run as node then click maven install AM
76. t Langumge contert en ameka name copynght content Kaitre Professional formation i vw kalte com f te name Atten content ba 7 rta ec Danaa rane evel shar Cortert 3 day neta reme nba Contr index clon a mala rumes language FS en gt Shyiss muin cas reis ylesheet types Aen cir ri tylesheet type text csa href Masters cus mairie oss gt ec D Lan type _VIEWSTATE ide _VIEWSTATE n SE SE EE EEN ae EE G fter teen XNOZW Tz KoFldm Veb 3BIZT BscGVjaWZp Y2FsbHkg Zm Oy HR ZSBOW 2 YWSIM RpbW before Ps EFRISHGFD 1FobWJcn EE TNo mhBFIBIGU o HHOVMCS OM cpg BOM Sys agen id Jogo pr dt ZTT hapt I7 abe Dye Dashbord Home Page gt lt a gt op one Fed Gres cerner o oio al View in Notepad Left menu displays list of data packages del 2012 Kalitte Result Protocol Host URL Body Caching Content Type Process 1 200 HTTP www dynamicdashboards net 13 697 private text html c chrome e 2 304 HTTP www dynamicdashboards net Styles ma n css 0 chrome e 3 304 HTTP s7 addthis com static btn sm share en gif D public image gif chrome Qs 304 HTP www dynamicdashboards net Styles Images dd logo png 0 chrome 5 304 HTTP www dynamicdashboards net Styles Images kalitte ya 0 chrome e 6 304 HTTP www dynamicdashboards net Styles Images banner y 0 chrome amp 7 304 HTTP www dynamicdashboards net Styles Images box1H png 0 chrome 2 8 200 HTTP ww
77. te sdch Accept Language en tr q 0 8 en US q 0 6 User Agent Mozilla 5 0 Windows NT 6 1 WOW64 AppleWebkit 536 11 KHTML like Gecko Chrome 20 0 1132 47 Safari 536 11 Cookies Login Ej Cookie yabs sid 1116906851341558349 yandexuid 245964886 1340351275 Referer http www sozluk net index php word C3 A 7e C5 9Fitli Transport Connection keep alive Host mc yandex ru Get SyntaxView Transformer Headers TextView ImageView HexView WebView Auth Caching Cookies Raw JSON XML HTTP 1 1 200 0K Cache Cache Control private no cache no store must revalidate max age 0 Date Fri 06 Jul 2012 07 05 57 GMT Expires Fri 06 Jul 2012 07 05 57 GMT Pragma no cache Cookies Login P3P CP NOI DEVa TAIa OUR BUS UNI STA Entity Content Length 74 Content Type text javascript Last Modified Fri 06 Jul 2012 07 05 57 GMT Miscellaneous Server Phantom 0 0 0 Transport Connection Keep Alive Proxy Connection Keep Alive Via 1 1 GATE Here is a JSON response sample in Fiddler ima 2012 Kalitte GetSyntaxView Transformer Headers TextView ImageView HexView WebView Auth Caching Cookies Raw JSON GC ISON webvisor date 2012 05 10 20 23 14 recp 0 03990 A XML response in Fiddler Get SyntaxView Transformer Headers TextView ImageView HexView WebView Auth Caching Cookes Raw JSON XML E3 html xmins http www w3 0rg 1999 xhtml head id ctl
78. template source as an underscore templat template template template Init view initialize function bindAll this render this render hy Render view render function this el innerHTML this template this model toJSON Create backbone view instance var myView new BackboneView LOADING RESOURCES ON DEMAND One of the common requirements while you develop your widgets is using external resources i e Style sheet files and JavaScript files inside your dashlets A solution maybe to add all resources to the head section of HTML page Although this works as expected loading resources dynamically when an instance of a dashlet created can be a better solution You can load a resource when user adds your dashlet to the dashboard and unload it when user removes your dashlet Assume your dashlet uses resources styles css and resources js JavaScript js files O 2012 Kalitte 4 Scripts dashlets 4 myDashlet gy viewer b FS kit n LOADING CSS FILES DYNAMICALLY DashletContext loadResource and DashletContext unloadResource functions can be used to load external css files define require function require return function params this context params context this domNode document createTextNode Hello world this startup function use require toUrl function to get file path this cssFile require toUrl resources styles
79. to work with client providers Use list method to get a list of registered client providers getInstance method to get an instance for a provider register method to register a new provider require klt dash provider Manager klt dash provider Manager function Manager Get a list of registered providers var providers Manager list for var providerKey in providers var providerData providers providerKkey PM 2012 Kalitte type returns type of provider var providerType providerData type if provider is already used use instance property to get a reference var providerInstance providerData instance console info providerKey s description says providerType description providerType description nothing console info providerInstance Provider instance is created Provider is only registered JsonRest s description says Provider for Jsonrest data stores O Kalitte Provider instance is created CREATING CLIENT PROVIDER INSTANCE To get an instance for a provider you can use get Instance method If you don t pass a value for providername parameter default provider that s the first registered provider s name is used require klt dash provider Manager klt dash provider JsonRest JsonRestProvider i function Manager var jsonRest Manager getInstance JsonRest var defaultProvider Manager getInstance getInstance
80. true bg save using provider when provider saveDashletModule module function function err console error err DE function err console error err Bol 2012 Kalitte Above code snippet shows how to set default pane configuration using DashletModuleModel paneConfig property New instances of Rss Reader will have default pane config properties of iconClass and disableMaximize After a dashlet is created it is also possible to set pane properties for that dashlet instance only using DashletContext paneConfig Below code shows a sample test dashlet module define function D 4 return function params this context params context var self this this domNode document createElement button this domNode innerHTML Test this domNode onclick function set config self context paneConfig set iconClass ui icon alert save using client provider Seika ie OMe Save WORKING WITH PANE COMMANDS ABOUT COMMAND OBJECTS A command is either a button or menu item displayed on pane DD allows developers to set initial commands for their dashlets or manage existing commands Command object is a simple JavaScript object which has the following key properties Method Name Description name Specifies name of the command This is generally a string value which uniquely identifies the command label Specifies label of command type Specif
81. ttpMessageConverter gt lt bean class org springframevork http converter xml XmlAvareFormHttpMessageConverter gt lt bean class org springframework http converter xml Jaxb2RootElementHttpMessageConverter reese lt list gt lt property gt lt bean gt lt bean id handlerMapping class org springframevork veb servlet mvc annotation DefaultAnnotationHandlerMapping gt lt bean id transactionManager class org springframevork jdbc datasource DataSourceTransactionManager gt lt property name dataSource ref dataSource gt lt bean gt lt bean id jdbcTemplate class org springframevork jdbc core namedparam NamedParameterJdbcTemplate gt Xconstructor arg ref dataSource gt lt constructor arg gt lt bean gt lt bean class org springframevork veb servlet view InternalResourceViewResolver gt lt property name viewClass value org springframevork web servlet view JstlView gt property name prefix value gt property name suffix value jsp gt lt bean gt Reload you Restful Service application from Apache Manager Congratulations you developed custom data provider and configured successfully 2012 Kalitte
82. ublishing and subscribing to global messages by topic One can subscribe to these messages by using messageBus subscribe and one can publish by using messageBus publish require klt core messageBus function messageBus messageBus subscribe some topic function console log received arguments DE messageBus publish some topic one two DD uses messagebus instead of events to broadcast messages This loosely coupled architecture enables testing simpler Below code snippet illustrates how to check sender of message using message bus ar self this subscribe to some topic i messageBus subscribe some topic function event check if this is the message coming from me if event sender self console info Got message published from me event args someArg will hold value 12 ODE create an event var event messageBus createEvent self someArg 12 Ee Meer Emerange messageBus publish some topic event This is very useful when other objects publish same topic and you want to only process messages coming from a specific object I 2012 Kalitte Message bus supports cancelling messages For example when a dashlet is about change visual state it publishes k t dash dashlet visualStateChanging topic You can subscribe to this topic check a condition and cancel the operation function essageBus subscribe klt dash
83. uding editor path COmencgs i editor path dashlets myDashlet editor Use createDashletModule method of default client provider when Manager getInstance createDashletModule module function result console info Created module function err console error err EE 2012 Kalitte Same rules for dashlets are also valid for dashlet editors They are AMD formatted modules and loaded by DD Below is a sample editor js file content i define function return function params this domNode document createTextNode Hello from Editor Test Dashlet Settings Hello from Editor Collapse Remove Save Apply Cancel Change positions Change Title When a new dashlet editor instance is about to be created by DD initialization parameters including context is passed to the constructor of your dashlet context is an instance of DashletEditorContext class and is the bridge between your dashlet editor and DD framework define function return function params for var key in params Assign initialization parameters to the dashlet editor instance this key params key console info Assigned key as this key this domNode document createTextNode Hello from Editor this startup function console info Started editor for this context dashletContext title Output is Assigned context
84. ured dashlets ADVANCED TOPICS This section focuses on advanced topics about dashlet development and customization techniques USING JAVASCRIPT TEMPLATE ENGINES Previous section demonstrated developing dashlets dashlet lifecycle and setting configuration values Although creating dom structure using document createElement or other helper functions may be a solution JavaScript templates will provide a better separation of user interface and data Templating is a good solution in a few scenarios e Loading all data from the server especially in rich list displays e Adding or updating new items in lists e Anywhere you need to add new complex content to the page e Anything that requires client side HTML rendering Rest of this section will show basic principles you can use with different JavaScript frameworks DD has no dependency to a particular templating engine and does not force you to use one of them USING DIJIT WIDGETS Dijit is a widget system layered on top of Dojo You can use dijit WidgetBase and dijit TemplatedMixin classes to easily develop you dashlets DECLARING WIDGET AND LOADING TEMPLATE First step to create a templated dijit widget is defining the widget inside an AMD module viewer js i define dijit WidgetBase dijit TemplatedMixin Ek function WidgetBase TemplatedMixin declare return declare WidgetBase TemplatedMixin templateString lt div gt lt p gt Hello fro
85. w dynamicdashboards net Images Customers timbe 6 757 image png chrome 304 HTTP www dynamicdashboards net Styles Images box2H png 0 chrome 2 10 304 HTTP www dynamicdashboards net Styles Images icon box2 0 chrome 11 304 HTTP www dynamicdashboards net Styles Images box3H png 0 chrome e 12 304 HTTP www dynamicdashboards net Styles Images icon box3 0 chrome 13 304 HTTP www dynamicdashboards net Styles Images box4H png 0 chrome Qe 14 304 HTTP s7 addthis com static r07 widget086 css 0 public text css Chrome 15 200 X HTTP www google analytics com _utm giffutmwv 5 3 3 35 private image gif chrome 16 200 HTTP m addthisedge com live t00 250lo gif inj5vil 37 max ag image gif chrome Selected package details can be viewed in the right menu Top section displays request details and the bottom section displays response details Both sections allows user to read request and response data such as JSON and XML formats Statistics i Inspectors autoresponder 2 Composer Cl Fitters El Log Em Headers Textview WebForms HexView Auth Cookies Raw JSON XML Request Headers GET watch 132644112m 9013248wmode 5 callback _ymjsp3618048page ref http 3A 2F 7 2Fwww sozluk net 2F amp page url http 3A7 2F 2Fwww soziuk net 2Findex php 3Fword 3D 25C3 25A 7e 25C5 7 259Fitli8browserinfo ve b j 1 s 1920x10 Client Accept Accept Charset I50 8859 9 utf 8 070 7 q70 3 Accept Encoding gzip defla

User Manual Copyright © 2012 Kalitte Professional

Contents

Download Pdf Manuals

Related Search

Related Contents

User Manual Copyright &copy; 2012 Kalitte Professional

Contents

Download Pdf Manuals

Related Search

Related Contents

User Manual Copyright © 2012 Kalitte Professional