-
September 2014 Never memorize what you can look up in books.
-
Table of Contents Mobile Applications...........................................................................................................................13 Types of Mobile App architectures...............................................................................................13 Design guidelines for Mobile Apps...............................................................................................13 Worklight..............................................................................
-
Creating a new Adapter.................................................................................................................70 Adapter Implementation................................................................................................................71 Adapter JavaScript implementation..........................................................................................71 Adapter Types..................................................................................................
-
WL.Client.invokeProcedure(invocationData, options)......................................................107 WL.Client.isUserAuthenticated(realm)..............................................................................107 WL.Client.logActivity(activityType).................................................................................107 WL.Client.login(realm, options)........................................................................................107 WL.Client.logout(realm, options)...........
-
Android Development......................................................................................................................125 Installing the Android SDK.........................................................................................................125 Managing the Android SDK........................................................................................................125 Android Emulator........................................................................................
-
dojo/dom.................................................................................................................................143 dojo/dom-construct.................................................................................................................143 dojo/query...............................................................................................................................143 dojo/dom-geometry..............................................................................
-
dijit/layout/TabContainer...................................................................................................167 dijit/TitlePane.....................................................................................................................168 dijit/layout/StackContainer.................................................................................................168 dijit/layout/BorderContainer............................................................................................
-
Progress Bar............................................................................................................................193 dojox/calendar/Calendar.........................................................................................................193 Parsing Dijit in HTML.................................................................................................................198 Object Stores and Data Stores.........................................................................
-
dojox/mobile/EdgeToEdgeStoreList..................................................................................236 dojox/mobile/ExpandingTextArea.....................................................................................236 dojox/mobile/FixedSplitter.................................................................................................237 dojox/mobile/FormLayout..................................................................................................
-
The Hello World app...................................................................................................................254 The JavaFX High Level Architecture..........................................................................................254 javafx.stage.Stage....................................................................................................................255 javafx.?.Scene..............................................................................................
-
JavaFX TextField....................................................................................................................277 JavaFX ToggleButton.............................................................................................................278 JavaFX Tooltip........................................................................................................................278 JavaFX TreeView...........................................................................................
-
Apache HTTP Server.......................................................................................................................288 Setting up a proxy........................................................................................................................288 Old Stuff...........................................................................................................................................289 Deployment Environments......................................................
-
Mobile Applications Applications are no longer limited to just running on a desktop PC or laptop. Instead, we now have a plethora of devices on which applications can live. Specifically, we will be thinking about smart phones and tablets. These devices have something in common … they are consumer items that are generally small enough to be carried with a person. Unlike classic PC desktops which are physically cumbersome and remain static in a person's office or home, the phone and tablet travel with people.
-
The patterns for designing user interfaces for mobile apps takes a different style from that for desktop.
-
Worklight IBM Worklight is a development and runtime platform for building a variety of user interfaces including mobile. Releases There have been a number of releases of Worklight: • June 2012 – 5.0 • December 2012 – 5.0.5 • April 2013 – 5.0.6 • June 2013 – 6.0 • November 2013 – 6.1 See also: • Worklight forum Architecture Worklight provides a set of components which work together to achieve a build and run-time environment for mobile applications.
-
• Worklight Studio – An integrated development environment (IDE) built on Eclipse used by a developer to build a mobile app. • Worklight Device Runtime – A framework supplied with the application that provides services used by that application. • Worklight Server – A back-end server environment used to service requests from a mobile app. • Worklight Console – A web based application used to manage and monitor mobile apps.
-
Center can be thought of as a private app store however it provides more function than that. Developers within your own company can publish new versions of the app for users to access without being at the mercy of 3rd party providers who may delay publication. In addition, the Application Center is common across device platforms meaning that you may publish it once for a variety of devices without having to worry about different processes to be followed.
-
Installation The installation of Worklight can be broken down into the installation of the distinct components associated with it. These include: • Worklight Studio – Development tools • Worklight Server – Test and production servers for application execution • Mobile Test Workbench for Worklight Prerequsites Before installing Worklight, the prerequisites must be met. These are documented here: http://www-01.ibm.com/support/docview.
-
C:\IBM\Worklight to serve as the root of my Worklight installations. I then extracted the Eclipse distribution into a folder called "eclipse". To launch eclipse, run the "eclipse" executable. Eclipse uses a folder to hold the workspace data. If we wish to use a specific folder of our own, we can update the launch shortcut for eclipse to include "-data ". This will causes eclipse to use the named directory for the workspace settings and data.
-
2. Add a new repository to install. 3. Select the ZIP file containing Worklight Studio. As 6.1.0, this is the file CIQ5PEN.zip. 4.
-
Note that it is essential that the Eclipse environment have Internet connectivity as installation of Worklight Studio will also require the installation of pre-req Eclipse components not distributed with the base Eclipse environment. This will likely mean connecting to the Internet to access the Eclipse framework downloads. Don't try and install Worklight Studio unless you are Internet connected. Once selected, click Next. 5.
-
6.
-
IBM Worklight Studio will now install. 7. Eclipse will now restart. See also: • Worklight Studio Installing an Android SDK Eclipse Plugin If you are going to be building Android applications, you will likely wish to install the Android SDK tools into the same Eclipse environment as the Worklight Studio environment. 1. Start Eclipse 2. Go to Help > Install New Software 3.
-
4. Define the ADT As of 2013-11-11 – the location for the plugin is: https://dl-ssl.google.com/android/eclipse/ See the following web page for validation and details: Installing the Eclipse Plugin 5.
-
You may see a security warning similar to the following: This is expected and one should select "OK". 6. After installation, we install the Android SDK Tools to the file system. See: Installing the Android SDK. Configuring the Worklight Studio embedded Application Server Worklight Studio launches an embedded WebSphere Application Server (Liberty Core) when it starts to host a Worklight Server instance that is to be used for testing.
-
this port number however it is easy to change. Installing Mobile Test Workbench for Worklight Installing Worklight Server The Worklight Server runs on top of an Application Server. A number of different flavors of hosting application server are supported: • WebSphere Application Server Liberty Core • WebSphere Application Server • Apache Tomcat In addition, Worklight Server requires a databases for its own operation.
-
suspect that everyone simply says "yeah yeah" and clicks next. Use your own judgment on how to proceed. Installation manager groups installed products into "packages" and designates a file system directory for each package. Here we name the directory into which the Worklight Server binaries will be placed and whether these will be 32bit or 64bit versions. In my install, I was using a 64bit version of Installation Manager and a warning message was shown that stated only 32bit versions of IM were supported.
-
Next we have yet another confirmation page that we are installing Worklight Server.
-
Now we are being offered the opportunity to configure our installation. The first question asks whether or not we wish to install the Application Center.
-
We are now asked what kind of database we wish to use.
-
We are now asked for information on how to connect to the database of the type we previously selected. This consists of entering the hostname and port number as well as pointing to a JDBC driver for that database.
-
In order to access the database, we need to specify a user we will use to connect.
-
CREATE DATABASE APPCNTR COLLATE USING SYSTEM PAGESIZE 32768 Page 33
-
Now we specify which kind of application server will be used to host the Worklight Server.
-
If installing into a WAS ND environment, you must select the Deployment Manager profile.
-
Page 36
-
Page 37
-
Page 38
-
The servers hosting Worklight Server should be restarted.
-
Next we are prompted to read, review and accept the license terms.
-
Now we select where on the file system we wish to install the product code.
-
Next we are asked for options to be included in the configuration.
-
One final check before install continues.
-
And at the end, we have installed the product.
-
Other Installation Tasks Following the installation of Worklight components, other installation tasks may be performed. • Java runtime for browsers – A number of browser components used by Worklight rely upon Java. This may be downloaded from www.java.com. • UserAgent switcher – The mobile test environment requires the installation of the UserAgent switcher.
-
Sources of Information The InfoCenter IBM's InfoCenter is the primary source for knowledge on Worklight. It is the on-line documentation for the product. It can be freely accessed at anytime whether or not one has purchased the product. It can be found here: http://pic.dhe.ibm.com/infocenter/wrklight/v6r0m0/index.jsp IBM Home Page The IBM Home Page for Worklight can be found here: http://www-03.ibm.
-
application with WebSphere Portal pages – 2013-08-07 • Prototype mobile applications built with IBM Worklight for IBM Watson – 2013-08-05 • Using the IBM Worklight optimization framework to build a cross-platform mobile application for multiple devices – 2013-07-17 • Server-side mobile application development with IBM Worklight: Part 4. Integrate the IBM Worklight adapter with SCA 1.
-
Application Development Worklight Studio Worklight Studio is the Eclipse based IDE for building Worklight projects. It can be launched by starting the Eclipse framework into which you installed the Worklight Studio environment. When I build Worklight projects, I choose to create a new windows folder for each project. In that folder, I create a new folder called "WorkSpace". This is where the artifacts I will build will reside.
-
See also: • Installing Worklight Studio Creating a Worklight Project One of the first things we will do when building a new solution is create a new Worklight Project. This is performed within Worklight Studio. We are now given the choice of building one of four types of solution: • Hybrid Application – An application that can be executed on a variety of platforms. • Inner Application • Shell Component – An environment in which an Inner Application can function.
-
Within the project we have a folder called "apps". It is within here that we will have a folder for each individual app within the project. Note that this implies a single project can contain multiple apps. Within a specific app folder, we have another folder called "common". This contains artifacts that are to be common between multiple deployment environments.
-
There are: File Description common/css/.css common/images/icon.png common/images/thumbnail.png common/js/.js common/js/initOptions.js common/js/messages.js common/.html legal/license.txt application-descriptor.xml Contains application metadata. build-settings.xml An App folder will also contain folders for each platform targeted.
-
Application Descriptor The Application Descriptor is an XML file contained within the application portion of the project that has the file name "application-descriptor.xml". Worklight Studio provides a rich editor for working with its content but it can also be examined and edited in its source XML format. Contained within the file are IBM defined elements and attributes: • id • platformVersion – The version of IBM Worklight used to build the solution.
-
From there, a dialog will be presented where one or more of the target environments can be added: Worklight Development Server A copy of the Worklight Server hosted by the WebSphere Application Server Liberty Core is Page 53
-
supplied and configured with Worklight Studio. It can be seen within the Servers view: The applications deployed to it are also shown. Developing UI – Rich Page Editor The primary development component within Studio for building user interfaces is the "Rich Page Editor". This editor provides the ability for the programmer to build HTML either visually through a drag and drop mechanism or in an HTML source editor. By default, the Rich Page Editor is started when an HTML file is requested to be opened.
-
The editor is full of features and function. Let us try and break some of these down. The primary editing surface takes up the majority of the area. One can look at this area in Design mode (a whatyou-see-is-what-you-get mode) or a Source mode (raw HTML) or a Split mode (half the window is Design Mode and half is Source Mode). The choice of modes can be selected at the bottom left of the window. In Split Mode, we can choose whether to split the window horizontally or vertically.
-
The implementation of the Rich Page Editor relies on a browser being available on the OS running IBM Worklight Studio. Not all browser types are supported: Windows • • Internet Explorer Firefox Linux • • Firefox Webkit Mac • Safari The above does not mean that other browser types aren't supported for use with a final application, rather these browsers are the ones used during development time within the Rich Page Editor.
-
The next page of the wizard allows us to set the name of the view and specify where within the HTML document the corresponding view will be inserted.
-
If we choose to set the view as the default, any previously selected default view will have its default attribute removed. Another important window in the Rich Page Editor is the Outline window. This shows a hierarchical tree structure of your HTML document. From there you can select elements from the list and they become selected in both the visual and source editors.
-
Designing visually In the Rich Page Editor's visual mode, a palette of available HTML and Widgets can be seen in the right hand side of the window. The palette is split into category folders corresponding to the widget sets that you have chosen to be part of the project.
-
item, the position within the document where the item will be inserted is shown. Releasing the mouse will insert the component. In addition to dragging a component into the visual canvas, a component can also be dropped in the source. Each component added to the canvas may have a variety of properties associated with it. A window titled "Properties" provides an visualization of these properties including the ability to change their values.
-
Off-line Storage One of the core architectural concepts that distinguish mobile apps from other types of app is that they are only transiently connected to a network. There is no assurance that at any given time they have access to a network. If an application is reliant on data this can result in the application being unable to be used while off-line.
-
Within a JSONStore one will find a set of "Documents". This might be a confusing name as they should not be considered documents such as PDF, Word or Excel. Rather, in Worklight parlance, a document is record or data structure. Each document consists of two primary parts: • An ID field that is unique to the document • A JavaScript object that is the content of the document A second level of abstraction called a "Collection" is defined. A collection is a container of documents.
-
Using the Mobile Browser Simulator Worklight provides an application which runs in the browser that simulates a device. This can be used to test your application without having to deploy it to an actual device or device supplied emulator. To launch the simulator, open the context menu for your application's device environment and select Run As > Preview: It is not yet known why there are two menu entries both labeled Preview.
-
When a browser runs, it provides an identification of what kind of browser and what environment it is running upon to the hosted JavaScript application. This identity is called the "UserAgent". While working with the browser simulator, we may wish to "override" the UserAgent identity to simulate multiple platforms. To achieve that, we need to enable UserAgent switching. If we do not enable user agent switching, the simulator will only show iPhone styling.
-
Clicking the "Install Browser Extension" will download the installer into the Downloads folder of your PC. To manually install this extension in Google Chrome: 1. Open the Chrome Settings page 2. Open the Chrome Extensions page 3. Drag and drop the "IBM Mobile Browser Simulator UserAgent Switcher" plugin onto the Chrome Extensions page. This may be supplied as a file called: mbuseragent@rational.ibm.com.crx 4.
-
5. A new entry will appear in the Chrome Extensions list Debugging console.log(...) WL.Logger.debug(...) WL.Logger.error(...) See Also • IBM Worklight Tutorial – Logging – Vimeo – 2013-04-01 Artifact management When working in Worklight Studio, you will always want to take backups of your work in case something horrible happens. You can export a project and import a project as a ZIP file.
-
You can now select the ZIP file that was previously exported.
-
At the conclusion of this step, a new project can be found which will be the import of the previous export.
-
Adapters It is very common for a mobile app to interact with back-end systems to retrieve information, request actions to be performed or store new data. To achieve this, the app must make a request to the back-end. Unfortunately, this opens up a whole slew of challenges. Different back-ends will support different communication protocols, different security requirements and more. Each of these has to be coded to and learned and can increase the time to build and test applications.
-
returns JSON then that data is left as-is. If the data returned is something other than JSON then it is converted into XML and then an XSL style sheet may be applied to build JSON. Finally, before sending the result back to the client, the adapter can manipulate the final data. Creating a new Adapter When we design a new mobile application that wishes to interact with a back-end system, we will create a new adapter to achieve that goal.
-
Adapter Implementation An adapter is implemented by a set of artifacts. To be specific: • An adapter configuration file in XML Within this file, a description of each of the procedures supplied by that adapter is defined. • A JavaScript file. Within this file one will find an implementation of each of the procedures offered by the adapter. • Zero or more XSL files used to convert back-end data to JSON.
-
commonly interacting with the back-end server through some other protocol. When we define the adapter, we define one or more procedures that can be called by the client. For each procedure, we need to create a corresponding function definition in the JavaScript. For example, if we define that an adapter will expose a procedure called "getGreeting" then we need to build a function definition in the JavaScript source file also called "getGreeting".
-
• protocol – The network protocol used to connect to the back-end server. The choices are either "http" or "https". Use http for un-encrypted network traffic and https for encrypted network traffic using SSL. See Configuring the HTTP Adapter for SSL for details on additional considerations when using SSL. • domain – The network domain name or IP address of the server hosting the back-end service. • port – The TCP/IP port number on which the back-end HTTP service is listening upon for incoming requests.
-
Configuring the HTTP Adapter for SSL When the HTTP adapter connects to the back-end server it can utilize the HTTP protocol over either plain TCP or SSL. To use SSL requires some setup. 1. Change the protocol type of the Adapter's XML configuration to "https". 2. Change the port number to be that of the back-end server's port for SSL. Example HTTP Adapter On the Internet there is an example public HTTP service that will return US Government representative details.
-
Security considerations None Returned data format XML We create a new adapter that we call Senators: We delete the sample procedures associated with it. Next we add a new procedure called getSenators.
-
At this point we have a defined adapter but no implementation for the server side procedure which calls the back-end service. We open up the "Senators-impl.js" implementation file for the adapter. We need none of the code templated by IBM. Instead we code only: function getSenatorByState(state) { var options = { "method": "get", "path": "getall_sens_bystate.php", "returnedContentType": "xml", "parameters": { "state": state } }; return WL.Server.
-
This completes our implementation.
-
This shows a dialog in which the procedure name and parameters may be supplied. Clicking the Run button shows us the results of invoking the adapter on the Worklight Server: JMS Adapter The JMS adapter allows a Worklight client to send or receive messages from a Java Message Service (JMS) queening provider. The JMS adapter encapsulates all access to the JMS system so that the client developer need only invoke the adapter without having to have knowledge of the underlying mechanics of JMS access.
-
When a JMS adapter is defined, the connection policy looks as follows: In the jmsConnection settings we have entries for: • connectionFactory – The JNDI entry name used to lookup the JMS connection factory that will be used to connect to the JMS provider. • user – The userid used to connect to the JMS provider. • password – The password of the user used to connect to the JMS provider.
-
• WL.Server.writeJMSMessage(options) • WL.Server.requestReplyJMSMessage(options) SQL Adapter The SQL adapter allows a Worklight client to execute SQL statements or stored procedures against a back-end database. The SQL adapter encapsulates the calls to the database hiding the mechanics of how this is achieved from the Worklight client developer. Worklight supports DB2, Oracle and MySQL database access.
-
• Password – The password for the user used to connect to the database. The definitions for the adapter are saved in its XML configuration file called .xml. This will contain an XML section called under the element. For example: com.mysql.jdbc.
-
Calling an adapter from the Client From the client side, we can invoke an adapter with Worklight provided API: WL.Client.invokeProcedure(invocationData, options) This is described in detail on the API page for that function. See also: • WL.Client.
-
Error Handling for Adapters See also: • developerWorks – Error handling in IBM Worklight adapters - 2012-12-05 Invoking Java code from an Adapter When an adapter is invoked by the client a JavaScript routine is executed. IBM's Worklight server runs JavaScript on the Mozilla Rhino engine. Rhino has the ability to execute arbitrary Java code. The implication of this is that an Adapter can also invoke Java code.
-
9. Define an adapter procedure called "getGreeting" 10. In the Adapter2Java-impl.js JavaScript file, implement the "getGreeting" function: function getGreeting(name) { var adapter2JavaInstance = new com.kolban.Adapter2Java(); var greeting = adapter2JavaInstance.getGreeting(name); return { "resp": greeting}; } 11. Deploy the adapter to the Worklight server 12.
-
13. Examine the response: From the above output we see that the response now contains the text from the code that was executed in Java. See also: • developerWorks – Server-side mobile application development with IBM Worklight: Part 1.
-
Application Center After you have built your mobile application, your next puzzle will be how to get the application to your users and how to get feedback upon it. The Application Center has a web based "console" which can be used to access its settings.
-
Installing the Application Center mobile client Page 87
-
Page 88
-
The installer for Android can be found in the file called: /ApplicationCenter/installer/IBMApplicationCenter.
-
Page 90
-
See also: • Application Center • Redbook – Enabling Mobile Apps with IBM Worklight Application Center – REDP-5005-00 - 2013-06-11 Page 91
-
Performance The performance of solutions built with Worklight can be improved via a number of different techniques. Minification When a Worklight solution containing JavaScript and CSS is built, part of the "cost" of executing that solution may be the size of the source files containing this data. Since JavaScript is not a compiled language but is rather an interpreted language, the JavaScript source file must be transmitted and parsed in order to run.
-
• Remove white spaces and comments • Google Closure Compile Simple Optimization In addition you can specify while files to include and exclude from the minification process. The syntax of inclusion and exclusion is: • ** matches any file. • * matches a file name (eg. *.js). • A ";" separates multiple entries. An example might be "**/js/**; **/css/*.css". Minification is only applied to desktop and web projects.
-
Secure on-device stored data The nature of a mobile device is that … it is mobile. This means it can be carried around with you and, as such, can be lost by you. Since mobile devices are frequently lost, we have the concept that any data kept on that device may be accessed by unwanted parties. To solve that problem, we have the option to encrypt sensitive data. This means that the data is converted into an unintelligible form and if it became known in that state, wouldn't be of any use to receiver.
-
Cross site REST calls If you are using the Chrome web browser, it has a command line option called "--disableweb-security" that switches off web security (Same Origin Policy) for that instance of the browser. This is useful for development but should never be used or suggested for production.
-
db2 SET CURRENT SCHEMA = 'WRKSCHM' db2 -vf /WorklightServer/databases/create-worklight-db2.sql -t 4.
-
Page 97
-
Page 98
-
5.
-
Page 100
-
6. Create the WORKLIGHT_INSTALL_DIR variable 7.
-
8. d 9. d 10. d 11. d 12. 13. s 14. s Operations After having installed and configure Worklight and built applications for distribution, it is likely that you will want to operate and maintain a variety of components including Worklight Server.
-
Client Side API Programming A JavaScript object called "WL" is created by the Worklight framework. This can then be used as the root or name-space for all other functions. WL.Client The JavaScript object called "WL" contain a child object called "Client" which acts as a container for a set of methods related to client side functions. The following act as a guide and notes on some of the functions available. The common "options" object Many of the functions documented here accept an "options" object.
-
WL.Client.connect(options) This method forms a connection to the Worklight Server. It must be executed before any other API calls from the client which may also wish to connect to the server. • options – The options passed into the connect request. This object contains the following definable properties: ◦ onSuccess – A function that is called when the connection to the Worklight Server has been completed. ◦ onFailure – A function that is called when a request to connect with the Worklight Server fails.
-
• WL.Environment.ANDROID • WL.Environment.EMBEDDED • WL.Environment.IPAD • WL.Environment.IPHONE • WL.Environment.MOBILE_WEB • WL.Environment.PREVIEW • WL.Environment.WINDOWS_PHONE_8 • WL.Environment.WINDOWS_PHONE • WL.Environment.WINDOWS8 WL.Client.getLoginName(realm) Returns the login name the user used during authentication. • realm – ??? See also: • WL.Client.getUserName(realm) WL.Client.getUserInfo(realm, key) Retrieve a property of the current used named by the key.
-
• key – ??? See also: • WL.Client.getUserPref(key) • WL.Client.setUserPref(key, value, options) • WL.Client.setUserPrefs(prefs, options) WL.Client.init(options) Initialize the Worklight client environment. This method should be called before any other WL.Client function. It is commonly called in the "initOptions.js" JavaScript file. • options – The options defining the initialization of the WL.Client environment ◦ timeout – The timeout in milliseconds for all calls to the Worklight server.
-
WL.Client.invokeProcedure(invocationData, options) Invoke a procedure exposed by an adapter. • invocationData – Data passed in to control the request to the adapter. This object contains the following properties: ◦ adapter – The name of the adapter which is to be invoked. This is a mandatory property. ◦ procedure – The name of the procedure exposed by the adapter that is to be invoked. This is a mandatory property.
-
• realm – ??? • options – ??? WL.Client.logout(realm, options) A function which when called will logout the user. • realm – ??? • options – ??? WL.Client.minimize() Minimize a widget when Adobe AIR is used as the deployment target. WL.Client.reloadApp() Reload the whole application. WL.Client.removeGlobalHeader(headerName) Remove an HTTP header definition sent to the Worklight server by this client application. The header would previously have been added by a call to WL.Client.addGlobalHeader().
-
WL.Client.setUserPrefs(prefs, options) Set multiple properties for a user in one single call. • prefs – A JavaScript object where the names of the properties in the object will be used as the names of the properties to be created and the corresponding values in the object used as the values of the properties. • options – ??? See also: • WL.Client.getUserPref(key) • WL.Client.hasUserPref(key) • WL.Client.setUserPref(key, value, options) WL.Client.
-
var busy = new WL.BusyIndicator(null, { "text": "I'm Busy!"}); busy.show(); On an Android device this will show as: WL.Toast.show(message) For Android only, shows a "Toast" message. WL.Client.init WL.Client.reloadApp WL.Client.login WL.Client.logout WL.Client.getEnvironment WL.Client.setUserPref WL.Client.setUserPrefs WL.Client.getUserPref WL.Client.
-
WL.Client.hasUserPref WL.Client.logActivity WL.JSONStore The WL.JSONStore functions provide access to the JSONStore APIs. WL.JSONStore.add(data, options) The add() method adds a new document into the collection. • data – A JavaScript object or array of objects that will be added to the collection • options – A JavaScript object that provides options to the add() method: ◦ additionalSearchFields ◦ push The add() method returns a Promise. WL.JSONStore.
-
WL.JSONStore.enhance(name, func) This function will add a named method to the prototype of Collections effectively extending their capabilities. • name – The name of the new function to add. • func – The implementation of the new function. The enhance() method returns a success code. WL.JSONStore.find(query, options) This function searches a collection to retrieve the set of documents that match a given criteria.
-
WL.JSONStore.getErrorMessage(errorCode) Retrieve a string representation of a JSONStore error described by the errorCode parameter. • errorCode – The error code for which we wish the textual message The getErrorMessage() function returns a string representation of the message associated with the error code. WL.JSONStore.getPushRequired() Retrieve a list of JSONStore documents that are considered "dirty" and need to be pushed back to the back-end for update.
-
◦ clear ◦ localkeygen – If a password is supplied and encryption to be used, a token is obtained as part of the encryption process. Where the token is generated is controlled by this parameter. The token can be generated on the client (true) or on the server (false). The init() method returns a promise. WL.JSONStore.isPushRequired(doc) Determines whether the given document has had changes made to it which would be pushed to the server. Returns true if it would be pushed and false otherwise.
-
WL.JSONStore.replace(doc, options) Replace documents within a collection with different versions. • doc – A single document or an array of documents • options ◦ psuh – A flag that controls whether or not the replacement should be pushed through to the back-end through the adapter. The replace() method returns a Promise. WL.JSONMStore.toString() Logs the documents in the collection to the debugger log by invoking WL.Logger.debug. WL.Device WL.Device.
-
WL.Logger.debug Server Side API Programming Server side programming is building logic that is executed when a client invokes an adapter. See also: • Adapter Components • Adapters WL.Server WL.Server.invokeSQLStoredProcedure(options) This API method invokes a DB stored procedure. It may only be invoked from within a SQL adapter implementation. • options – Options that govern how the SQL procedure is invoked. ◦ procedure – The name of the DB hosted procedure to invoke.
-
◦ parameters – Any parameters required by the procedure. See also: • WL.Server.invokeSQLStoredProcedure(options) • WL.Server.createSQLStatement(statement) • SQL Adapter WL.Server.invokeHttp(options) This API method makes an HTTP call from the Worklight Server to a back-end HTTP service provider. This API call is only meaningful to be called in the context of an HTTP Adapter procedure invocation. Note that the host and port of the request are not supplied as part of the parameters to this request.
-
supplied. • transformation Unusually the invokeHttp() method seems to execute synchronously. The result is a JavaScript object that contains the response from the HTTP request. The properties in the response are: • info • errors • warnings • isSuccessful – true or false • responseHeaders – The HTTP headers received in the response from the HTTP request. • responseTime – The HTTP response time in milliseconds, • totalTime – The total time in milliseconds.
-
} "name": "Ted Cruz", "office": "185 Dirksen Senate Office Building", "party": "R", "phone": "202-224-5922", "state": "TX" ] } }, "statusCode": 200, "statusReason": "OK", "totalTime": 349, "warnings": [ ] We have the ability to test a WL.Server.invokeHttp() execution directly from within Worklight Studio. Before we explain that it more detail, let us think about what such a test actually means.
-
This will open a dialog into which we can enter a JavaScript Object that will be passed as the parameters to the function. Note that experience seems to show that the names of the properties have to be surrounded in quotes.
-
When the Run button is clicked, the invokeHttp function is executed by the Worklight server in the context of the deployed adapter. A further dialog is shown which shows the raw data that was received by the adapter when it made the actual REST request to the back-end as well as a window area in which the JavaScript object returned to invokeHttp can be seen.
-
See also: • HTTP Adapter Procedure implementations WL.Server.readSingleJMSMessage(options) This API method reads a JMSText message from a JMS queue.
-
queue. • options – A description of how the message is to be read ◦ destination – The JNDI name of the queue from which the message is to be read. ◦ timeout – The optional duration in milliseconds to wait for a message to arrive if no message is immediately available. A value of 0 means wait indefinitely while a value less than 0 means do not wait at all. If not supplied, the default is not to wait. ◦ filter – The optional message filter to be used to choose a message.
-
If not supplied, the message will not expire. See also: • WL.Server.readSingleJMSMessage(options) • WL.Server.readAllJMSMessages(options) • WL.Server.requestReplyJMSMessage(options) • JMS Adapter WL.Server.requestReplyJMSMessage(options) This API method writes a JMSText message to a defined queue and then awaits a response on a second queue. The second queue is dynamically created to receive the message and is then disposed of at the end.
-
Android Development Installing the Android SDK The Android SDK is required for building Android applications. It should be downloaded and installed into the same machine as Studio. As of 2013-11-11 the web page for downloading the Android SDK is: Android SDK It is about 480MBytes in total. Managing the Android SDK Android Emulator The Android SDK comes with an Android device emulator. This can be used to test a Worklight application.
-
JavaScript Frameworks jQuery Mobile Dojo and Dojo Mobile When creating a new app, we have the opportunity to select to include the Dojo library: When Dojo is used in an application, two files are added called: • build-dojo.properties • build-dojo.xml See also: • Blog – The Dojo Library in Worklight Studio V6.
-
Local storage of data Ideally, a Mobile App should also be able to operate when it is not currently connected to the network. In other words, it should be able to operate while "disconnected". To achieve this, data that it may need to work may have to be available on the device. To achieve that, the application will need mechanisms to both store ands retrieve such data. By the nature of mobile apps, there is also a new problem. The device on which the mobile app is hosted may be lost or stolen.
-
Web Programming Web programming is the notion of writing applications that will exclusively run within the browser. The skills necessary for any web programming task usually consist of: • HTML – A knowledge of the core declarative language of the browser. • CSS – A knowledge of how to style elements in the browser page. • JavaScript – Knowledge of the JavaScript programming language which is the language supported by all browsers.
-
By creating a free userid, you can save your snippets for your own use or for sharing with others. Document Object Model – The DOM Types of nodes found in the DOM • element nodes • text nodes • attribute nodes (note that attribute nodes are NOT children of element nodes) HTML Images When working with web based programming, it is likely you are going to make extensive use of images of different formats.
-
JavaScript JavaScript is the native programming language for browsers. It is typically executed by including a script tag such as: alternatively, the JavaScript code can be written in a separate source file and included: JavaScript – Date object The native JavaScript Date object holds dates and times. It has a rich set of getters and setters associated with it.
-
Calling JavaScript from Java With the arrival of Java 8, JavaScript has become a first class and pre-supplied addition to the Java environment. To call JavaScript from Java, the following is a good sample: ScriptEngineManager manager = new ScriptEngineManager(); ScriptEngine engine = manager.getEngineByName("nashorn"); engine.eval("... JavaScript …"); To access a Java package for example "com.kolban.mypackage", we would refer to it by: Packages.com.kolban.
-
The {less} language The Less language is a preprocessor for CSS. This means that one can construct CSS much easier than hand crafting. For example, consider the following simple CSS: .class1 { color: red; } .class2 { color: red; } If we wished to change our color, we would have to manually change our CSS file. A simple find and replace may catch too much. However, using Less, we can specify variables, for example: @myColor: red; .class1 { color: @myColor; } .
-
• setInterval(function, interval) - Calls a function repeatedly every timer period • setTimeout(function, interval) - Calls a function once after a time period The time periods are expressed in milliseconds. Both these functions return a handle which can be used to cancel or stop the firing of events. passing the handle into the function "clearTimeout(handle)" will cancel the previous timer.
-
examine the state of variables and contexts within our program. One of the easiest ways to insert a breakpoint is the codding of the "debugger" statement. When reached and the debugger is available, debugging will occur. Logging to the browser console Within the JavaScript that runs in the browser, an object called "console" is available. Using this object, one can log data to the browser's console.
-
See also: • console.log • console.debug • console.info • console.warn console.info This method is a synonym for console.log. See also: • console.log • console.debug • console.error • console.warn console.log This method logs data to the browser console. The input can be a list of strings or objects. If a string is supplied, it may contain formatting controls that can be used to format output.
-
Dojo Programming Dojo is a completely open source JavaScript toolkit primarily designed for web programming. Its current release level is 1.9 (as of 2013-11). The source code is freely accessible and has a broad community of support. IBM has chosen Dojo as one of the key programming interfaces supported by Worklight and other IBM products. IBM contributes heavily to the existence and support of Dojo. Dojo is split into three primary packages.
-
7. Create a "setenv.bat" file that adds the GIT/bin folder to the command path. In this example it was: C:\Program Files (x86)\Git\bin 8. Add into the path the NodeJS entry install directory. In this example it was: C:\Program Files\nodejs 9. In the extracted dapi directory run the following command which will install the Node.js modules that are flagged as needed for the dapi tool. The command I used was: npm -install --production 10.
-
Dojo GUI Development Dojo development can be performed in HTML or in JavaScript. Other alternative development environments include IBM's Integration Designer and IBM's Worklight Studio products. Loading Dojo Dojo does not automatically pull packages into the browser environment. That would be far too much data to transmit and would bloat the browser unnecessarily. Instead, Dojo delegates the choice of which packages to include to the developer through the use of the require() function call.
-
to reveal the content. Asynchronous Module Definition (AMD) Dojo package loading is achieved through a technology called "Asynchronous Module Definition" or AMD. This was first introduced at the Dojo 1.7 release. In order to use AMD, the Dojo loader must be instructed to execute in async mode: The loader in this mode exposes only two global functions: • require • define The require function takes a list of module names to be loaded.
-
• map See also: • Defining Modules • The Dojo Loader • sitepen: Dojo FAQ: How does passing a configuration object to require work? - 2014-01-22 • sitepen: Dojo FAQ: What is the map config option? - 2013-07-03 • sitepen: Dojo FAQ: What is the difference between a package, a path and an alias? - 2013-06-20 Event Handling The web programming model of the world is that we set up an environment and then wait for external events to occur to which we respond.
-
• xhr.post() - make an HTTP POST request Each of these methods takes two arguments: • url – The target URL of the request • options – A JavaScript object which sets options on the request Some of the more prevalent options available include: • query – An object where the property names will be query parameter names and the property values will be the corresponding query parameter values. • handleAs – How the return data should be handled.
-
See also: • Deferred and asynchronous processing – dojo/Deferred • Ajax with Dojo • DojoToolkit: xhtGet • DojoToolkit: dojo/request/xhr (1.8) • Basic Access Authentication • sitepen - Introducing dojo/request - 2012-08-21 Testing REST Calls There are a number of ways to test REST calls to a REST provider and it is recommended to do this before embarking on writing application code to ensure that the results will be as expected.
-
• Dojo DOM Functions dojo/dom This module provides some of basic DOM functions. These include: • byId(id) – Find the single DOM node with the given id. • isDescendant(node, ancestor) – Returns true if the node is a descendant of ancestor. dojo/dom-construct • toDom(htmlString, document) – Builds a DOM tree from the HTML string and returns the DOM that is the root of that tree.
-
E>F An F element that has an immediate parent of type E. E:link E:visited E:active E:hover E:focus E[foo] An E element with an attribute called foo. E[foo="bar"] An E element with an attribute called foo that has a value of bar. E[foo~="bar"] An E element which has an attribute called foo that has a list of values that are space separated and one of which has a value of bar. E[hreflang|="en"] E:lang(fr) E.
-
dojo/dom-geometry The dojo/dom-geometry class provides accessors for working with the geometry (sizes and positions) of DOM nodes. Convention maps this package to the alias called "domGeom". Among its many methods include: • getContentBox(node) – Returns an object that contains. { w: h: l: t: } • Others ... Dojo Dates and Times Dojo has a number of classes for working with dates and times. These augment the JavaScript native date and time functions.
-
◦ minute ◦ second ◦ millisecond ◦ quarter ◦ week ◦ weekday • compare() - Compares two dates and returns 0 if they are the same, positive if the first is after the second and negative if the first is before the second. • getDaysInMonth() - The number of days in the month. • isLeapYear() - Returns true if the year is a leap year. • getTimezoneName() - Returns the name of the time zone. dojo/date/locale This is the work horse of the Dojo date and time formatting.
-
◦ milliseconds – A boolean. If selected, milliseconds will be included. See also: • Dates and times within JSON Dijit Widgets In modern UI environments, we usually do not build our UI pixel by pixel. Instead, we assumed that there exist rich and high level building blocks. These building blocks are so common to us now that we take their existence for granted. Examples of such building blocks include buttons, menus, dialogs and select boxes.
-
instance of a button, nothing at all will be shown in the web page. We haven't told the button where on the page it should appear. This is a core notion. Creating a widget does not cause it to appear. We must also tell the widget where on the page it should be located. To do this, we must associate the widget with a DOM node. Think of the DOM node as being an anchor on the page that describes where the widget should appear. We have a couple of ways to associate a widget with the desired target node.
-
page. • claro • tundra • noir • soria Form Widgets All Dijit widgets inherit from their base called dijit.form._FormWidget. You can think of this as the Java Interface against which all other form widgets are derived meaning that they have a consistent set of semantics. There are some common properties associated with each Form widget.
-
/// code here }); Experience shows that the values can be: • "incomplete" – Missing required field not entered. • "error" – Data in one or more fields is invalid. • "" – This indicates that the form is valid. It is important the form widgets startup() method is executed only after all the children widgets contained within the form have been initialized. The property called "value" will return an object with the current values of the fields in the form.
-
text-align: center; background-repeat: no-repeat; } Here is an example. In the
of the HTML page, we define a new Style: To show the button, we code:
-
• autoComplete – If set to true, characters entered are used to match with the pre-defined possible values as soon as possible. • hasDownArrow – Whether or not a down arrow is shown beside the combo box to show selectable values. The default is true.
-
The date is accessed via the "value" property and is a JavaScript "Date" object with no time component of the date set. If the date is removed from the entry box, null is returned. See also: • Dojo Docs – dijit/form/DateTextBox – 1.9 • Working with Dates in Dojo – 1.9 dijit/form/TimeTextBox This widget shows a time box from which a value can be chosen. The "value" property will contain a JavaScript date object from which the date portion should be ignored … only the time is relevant.
-
Methods: displayMessage(String) – displays the message associated with the text box. If no parameter is supplied, any existing message that is currently being shown is removed. • Text Editors A common desire in a web UI is to be able to enter text data.
-
Amongst the properties of this widget are: • rows – the number of rows to show • cols – the number of columns to show See also: • dijit/form/Textarea • dijit/form/TextBox dijit/form/NumberTextBox This widget provides numeric entry with checking. The constraints (provided by the "constraints" object property) include: • min – The minimum allowable value • max – The maximum allowable value • pattern • places – number of decimal places See also: • Dojo Docs – dijit/form/NumberTextBox – 1.
-
Lists dijit/form/MultiSelect The MultiSelect widget allows the user to select from a set of available options shown on a list. It can be used to select a single item or multiple items. It is basically a wrapper around the HTML
-
By default, the Select changes its width to accommodate the selected item. This is rather unusual (opinion) as the widget seems to move about. We can set a fixed width using the "width" CSS style property. Among its more important properties are: • disabled – A boolean. If set to true, then the control is disabled. If disabled, it has a disabled appearance. • options – An array of the options for the select.
-
not. The default is true meaning that it should be initially shown open. dijit/Fieldset This widget places content within a fieldset that may be collapsed. Dialogs A dialog is a pop-up window showing additional content. This window can usually be moved around within the primary parent window. The window can also be closed. Commonly, the appearance of the dialog means that it has to be closed before interaction with other content may be achieved. This is what is known as a "modal" dialog.
-
See also: • Dojo docs – dijit.dialog – 1.10 dijit/TooltipDialog Very similar to the dijit/Dialog, the dijit/TooltipDialog also shows a modal dialog. However, unlike the other one, dijit/TooltipDialog has two primary differences: • Clicking outside the dialog disposes of it. • The dialog is positioned showing a relationship to another widget. The TooltipDialog can be shown from a DropDownButton or through the use of the dijit/popup mechanism.
-
Menus Dojo has extensive menu support. It provides both menu bar and context menus. Let us look first at menu bars. The code for the above looks as follows: require(["dijit/MenuBar", "dijit/PopupMenuBarItem", "dijit/Menu", "dijit/MenuItem"], function(MenuBar, PopupMenuBarItem, Menu, MenuItem) { var pMenuBar = new MenuBar({}); var pSubMenu1 = new Menu({}); pSubMenu1.addChild(new MenuItem({label: "Info 1"})); pSubMenu1.addChild(new MenuItem({label: "Info 2"})); pMenuBar.
-
); A menu item can be disabled using its "disabled" property. Setting that to true disables the menu item. Images can be added to menu items using the "iconClass" attribute (see also Button). This property names a CSS class that declares an icon. For example: .Calendar_Summary { background-image:url(text16x16.png); width:16px; height:16px; text-align: center; background-repeat: no-repeat; } Dijit provides a utility widget called popup that can be used to pop-up a menu.
-
• addChild() • bindDomNode() See also: • dijit/MenuItem • dijit/popup dijit/MenuBar dijit/MenuItem This widget represents an entry in a menu. Among its properties are: • label – The text to show within the menu item. • iconClass – The CSS class to use to show an image in the menu item. The widget also publishes a number of useful events • "click" – Called when the menu item is clicked.
-
• popup – The widget to actually popup to the user (eg, an instance of Menu) • around – The dom node that will be the host of the popup • orient – A list of locations one of which will be chosen to show where the popup menu will be shown. The options are: ◦ before ◦ after ◦ before-centered ◦ after-centered ◦ above-centered ◦ above ◦ above-alt ◦ below-centered ◦ below ◦ below-alt See also: • dijit/TooltipDialog • Dialogs & Tooltips – 1.
-
◦ horizontal – Show the list horizontally. ◦ vertical – Show the list vertically. • effectUnits – The number of pixels to scale per mouse move increment. The default is 2. • itemPadding – The number of pixels between each item at rest. The default is 10. • attachEdge – Which edge should be "attached" (i.e. be the base of the image). The default is "center". ◦ top – The top edge of the widget is fixed. ◦ bottom – The bottom edge of the widget is fixed. ◦ left – The left edge of the widget is fixed.
-
margin: 0 auto; text-align: center; } Layouts Dojo provides some powerful layout capabilities. In addition, we can always use the classic HTML layouts such as tables.
See also: • Layout with Dijit – 1.9 • PACKT – Layout in Dojo: Part 1 - 2009-07 dijit/layout/ContentPane The ContentPane is a container for other widgets and markup. The function called "addChild()" can be used to add another Dijit into the ContentPane.
-
"AccordionContainer" is part of dijit.layout. The "panels" in the accordion are added via the "addChild()" method. Typically, the child is a ContentPane which can supply a title as well as content. myAccordion.addChild(new ContentPane({ title: "My Title", content: "My content" })); See also: • Create a Simple Dojo Accordion - 2010-08-17 dijit/layout/TabContainer The Tab Container can host a series of Content Panes where each pane shows in its own tab. When one pane is shown, the others are hidden.
-
◦ right-h • useMenu • useSlider See also: • Dojo Docs – Tab Container – 1.9 • dijit/layout/StackContainer dijit/TitlePane Setting the toggleable property to false will prevent the title pane from being collapsed. dijit/layout/StackContainer The Stack Container can host multiple children (called Panes) but only one child at a time is ever shown. It is similar in concept to the TabContainer with the exception that the pane shown is changed by logic and not be user interaction with tabs.
-
The next image shows a sidebar design mode: As you can see, both contain the same number and types of panels but the width of top and bottom vs the height of left and right are managed differently. When the Border Container is created, it is initially "empty" meaning it has no content. Its children are most likely going to be instances of "ContentPane". A child can be added using the addChild() method of the Border Container.
-
the region is re-sizable in a single direction. The following JavaScript will create and add a Border Container with both left and center regions: var borderContainer = new BorderContainer( { title: "My Border Container", design: "horizontal", style: "height: 250px;" }); borderContainer.placeAt(this.context.element, "first"); var leftRegion = new ContentPane( { style: "width: 33%; background-color: #FFDEAD", title: "My Left", region: "left" }); borderContainer.
-
◦ right – The right region ◦ center – The center region • splitter – true or false. Can be set on any region except "center". • minSize – The minimum size in pixels if the size is shrunk by the splitter. Specify 0 for no minimum. • maxSize – The maximum size in pixels if the size is grown by the splitter. Specify Infinity for maximum. A particularly useful pattern for BorderContainer is to enclose a widget that "wants" to be 100% in size but we would like to surround with other widgets.
-
• orientation – The location of the labels relative to the field. The choices are: ◦ "vert" – The label is above the field. ◦ "horiz" – The label is to the left of the field. This is the default. See also: • Dojo Docs – dojox/layout/TableContainer – 1.10 dojox/layout/GridContainer The notion behind this widget is to provide a container into which other widgets can be placed. The widgets contained within can be dragged and dropped dynamically by the end user into a set of columns.
-
• nbZones – The number of columns (zones) in the grid. There are also a number of methods of interest on the GridContainer including: • setColumns() - Set the number of columns to show. This has to be greater than or equal to the number of columns that contain widgets. For example, if a grid container contains three widgets with the first two being in column 1 and the last being in column 2, then we can set the number of columns to be 2 or greater.
-
dijit/ColorPalette Among the more interesting properties of this widget are: • palette – A string of either "7x10" or "3x4" describing the size of the palette. • value – The currently selected color. The Data Grid Arguably one of the most important widgets in the Dojo set is the Data Grid widget. This is a table widget that displays data in rows and columns.
-
• selectionMode ◦ none ◦ single ◦ multiple ◦ extended • columnReordering • headerMenu • autoHeight ◦ Not supplied – the height of the
◦ true – resize to the number of rows ◦
- maximum number of rows to show • autoWidth • singleClickEdit • loadingMessage • errorMessage • selectable • formatterScope • updateDelay • initialWidth • escapeHTMLInData Notice that the columns are defined in the structure field.
-
• hidden – A boolean. When set to true, the column is hidden. • classes – A set of CSS class names used to style the column The DataGrid also supports the following events: • onMouseOver • onMouseOut • onRowClick • onRowDblClick • onRowContextMenu • onSelectionChanged • … more In order to use the Data Grid, one must also include CSS styles: PAGE 177
If double click for editing is too much, an option called "singleClickEdit" can be added so that only a single click will be needed to edit the cell. This should be added to the
tag. Selecting items A check-box or radio button can be added in the left column to show selection. Defining the structure as: structure: [ { type: "dojox.grid.
-
data store as input. eg. var store = new ObjectStore( { "objectStore": new Memory( { "data": data.caseHistories.items }) }); grid.setStore(store); Formatting The "structure" property which defines columns, has a field called formatter that is supplied as a function that takes the data value as a parameter. Before going further, let us re-iterate where the formatter function is defined. It is defined within a structure column definition and hence it has peer fields which include "field".
-
columnIndex could be negative to indicate that the column is sorted descending. The first column is "1". Consider using Math.abs(columnIndex) to get the absolute value. Cell events When the mouse is over a cell, the onCellMouseOver event can be used to detect that. The event passed in has a property called "cell" that is an object. This has a property called "index" which is the numeric index of the column that the cell belongs in (0 is the first column).
-
• field – The identity of the field in a row of data that should be shown in cell. • name – The column name of the column • decorator – A function that takes (data, row.id, row.visualIndex) as parameters and returns the content of the cell. If not supplied, the data of the cell itself is returned.
-
See also: • Object Stores and Data Stores GridX Modules The architecture of GridX is such that it has a set of optional plugins called "modules". These can be added to the grid through the grid's "module" property which is an array of modules. Each entry in the array is the class for the module that has been loaded.
-
called, it is the responsibility of the function to set the widget to contain the data value. Notice that in the widget description, we can add the data-dojo-attach-point option. This creates a variable which can be accessed in the setCellValue callback through this.. This will be the object reference to the new widget. Imagine that the cell is defined to have a button contained within it.
-
• props (String) - Set of properties defined on the Dijit Widget • fromEditor (function(storeData, gridData)) – Function to be called to return the value from the editor. • toEditor (function(storeData, gridData, cell, editor)) - Function is called to populate the editor widget. The editor parameter is a reference to the Dijit widget used to edit the cell. • constraints (Object) - Additional properties passed to the editor.
-
} }, editor: 'dijit/ColorPalette', editorArgs: { fromEditor: function(v, cell){ return v || cell.data(); //If no color selected, use the original one. } // End of fromEditor } // End of editorArgs Note the editor property. It says that that the editor for this column will be the ColorPalette. gridx/modules/Filter This module adds the core capability to filter the rows in the grid. It supplies two core functions: • setFilter() - Sets a function to filter the data.
-
It is not expected that all properties are populated. Instead, the property populated will be a function of the hookPoint attribute set in the menu options. The second method available is called unbind(menu) which unbinds a previously bound menu. Here is a quick example of adding a menu such that when a row is context click, a menu appears: var menu = new Menu(); // Instance of dijit/Menu menu.addChild(new MenuItem({label: "test1"})); grid.menu.
-
Some of the more interesting properties of this module are: • multiple – A boolean. If false, only single selection is allowed. The default is true which allows multiple selection. Some of the more interesting methods include: • getSelected() - Returns an array of all the "ids" of the selected items. If nothing is selected, an empty array is produced. The model byId() function can be used to get the data for the rows once we have the id.
-
Among its properties there are: • sizes – An array of numbers corresponding to the different sizes that can be supplied for paging. A negative number means "all". GridX Styling Mouse and keyboard events Mouse and keyboard events can be capture almost anywhere in the GridX environment.
-
rowId Cell, Row, RowHeaderCell rowIndex Cell, Row, RowHeaderCell parentId Cell, Row, RowHeaderCell visualIndex Cell, Row, RowHeaderCell columnId Cell, HeaderCell columnIndex Cell, HeaderCell cellNode Cell headerCellNode HeaderCell rowHeaderCellNode RowHeaderCell, Row isRowHeader RowHeaderCell, Row Common GridX patterns When working with GridX, there are common patterns that come about. Here is a list of some of the more common recipes.
-
First we can create a column in the grid to hold the button. { field: "name", name: "Actions", widgetsInCell: true, decorator: function() { return "
"; }, getCellWidgetConnects: function(cellWidget, cell) { return [ [ cellWidget.btn, 'onClick', function(e) { // 'cell' contains the cell clicked … // 'cell.
-
• xstyle • put-selector The Tree Dojo provides an elegant tree Widget that can show hierarchical data. The core of the tree is a Dijit widget called dijit/Tree. This provides the visual representation of the tree in the browser. The tree however does not own the data. It merely provides a visualization of the model of the data. The data itself is owned by an object that implements the tree model. The data folders shown in the tree can be opened and closed. See also • Docs – dijit/Tree – 1.
-
dijit/tree/Model This is an abstract interface that describes the methods and properties provided by a tree model. The dijit/tree/ObjectStoreModel is an example of a pre-built instance of this interface. An implementation of this interface must provide: • destroy • getChildren – Obtain a list of children of the passed in item. • getIdentity – Return the identity of the passed in item. • getLabel – Return the label that should be used for the item in the tree.
-
dijit/tree/Model that owns the data shown in a dijit/Tree. What it does is map from a dojo/store to the tree model. Each element in the store must have the following: • id – A unique id that is unique against all other elements in the store. • name – The label shown in the tree. The name of this property is the default but can be changed with the "labelAttr" property. • type – The type of the item in the tree. The name of this property is the default but can be changed with the "typeAttr" property.
-
Progress Bar Dijit provides a progress bar which shows a bar with optional text contained within it. Associated with the bar is a numeric value which is visually represented by the size of the bar. The core properties of this control are: • value – The value of the progress. • maximum – The maximum value of the bar. • label – The text contained within the progress bar. • indeterminate – A true/false value. When true, the bar animates to show that the progress is unknown.
-
column "column" and "matrix". A column style shows data for a period (eg. a day) in a single column. The matrix style shows a "grid" of entries. The data shown in the Calendar is bound to an instance of a Dojo Store. If the content of the store changes, so does the representation of the Calendar. Conversely, if a user interactively changes the Calendar, the store updates itself to reflect the change at the data level.
-
created, a property called "templateString" can be set to a fragment of HTML. This fragment defines the buttons. The default text looks as follows:
