Csnover/dojo-boilerplate. Working with Dojo and AMD in Production. In our recent post on dgrid and Dojo Nano, we showed a technique of using nested require statements in order to make use of optimized layers using the Dojo build system. As a refresher, a layer is Dojo’s terminology for a file that combines many JavaScript resources into a single file. This improves the performance of your web application by minimizing the number of HTTP requests. The technique we originally presented was a quick and simple approach: While this works, it’s not ideal because you will need to modify your source when switching between development and production environments which is suboptimal. Single-layer builds Ideal for: A quick, simple, single-layer application In the original blog post, we focused on building simple nano and baseless builds.
Defining a different require module based on the URL Ideal for: Quick and simple approach to loading based on the URL format This approach evaluates the application’s dependencies as a function of the URL. Top level modules Conclusion. Effortless Offline with OfflineRest. There is growing support in browsers for offline capabilities with the HTML 5 specification for local storage, offline notifications, and offline application cache, but adapting an application to store changes locally and do synchronization when connectivity is restored remains a major challenge for developers.
Dojo 1.2′s new dojox.rpc.OfflineRest module automates the local storage of data and synchronization by leveraging the Dojo Data and REST abstractions. The OfflineRest module augments the JsonRest service in Dojo such that requests are cached in local storage for offline access, and modification requests (put, post, and delete) modify the cache and are recorded for delivery to the server; immediately if online, otherwise when connectivity is restored. Furthermore, JsonRest is the core engine used by JsonRestStore. Our demonstration of OfflineRest is a simple database of hiking trails. Here in Salt Lake City, we have a vast array of trails close to my house. IBM WebSphere Application Server Feature Pack for Web 2.0 and Mobile Showcase Sample.
Dojox.app 1.8 proposal. ToDo App. MVC. Unscriptable.com. Dojo Tips 'n' Tricks. EmbedJS - Build Your Own Framework. Maqetta | Dojo Foundation Blog. Maqetta was officially announced today as the newest Dojo Foundation project. There’s a nice Maqetta eWeek article, and below is the full press release for the newest project to join the Dojo Foundation: IBM Contributes Maqetta – HTML5 Visual Authoring Tools – to Open Source Community Free Web Hosting and Downloads Available at Maqetta.org ARMONK, NY – 10 Apr 2011: IBM today announced the open source contribution of Maqetta to the Dojo Foundation. Maqetta provides WYSIWYG authoring of HTML5 user interfaces using drag/drop assembly, and supports both desktop and mobile user interfaces. HTML5 is an umbrella term for dozens of new features that ship in modern browsers (desktop and mobile) that allow rich user interfaces, graphics, multimedia and fast performance using open standards.
The Maqetta application itself is authored in HTML5/Ajax, and therefore runs in the browser without requiring additional plugins or downloads. “Browser-based tools represent the new frontier. Globalization Guidelines: Locale and Resource Bundle. Locale Setting in Dojo There is a slight difference in the locale naming conventions between Dojo and Java. Dojo uses “-” (hyphen) as the separator for concatenate language code, country code, and variants, whereas Java uses an “_” (underline). For example, “zh_CN” in Java is similar to “zh-cn” in Dojo.
Like the default locale in Java, Dojo has a global locale value that is stored in a global variable: dojo.locale. This default locale value affects the behavior of several locale-related functions and widgets. The value of dojo.locale is not supposed to be changed. You should use dojoConfig.locale to initialize this value. You must set dojoConfig.locale in all files to achieve server-based personalization If dojoConfig.locale is undefined, Dojo will consult the browser’s navigator object for the setting chosen at browser install time. Resource Bundle Files You must always use resource bundles to store the strings displayed to users. Dojo introduces resource bundle into JavaScript. Builds. Populating your Grid using dojo.data. Making Functions with hitch and partial. In this tutorial, you'll learn the basics of the Function object—and how to bind contexts to functions using dojo.hitch. From there, you'll learn how to bind specific arguments to a function using dojo.partial, and how dojo.hitch can combine the two operations.
Difficulty: Intermediate Dojo Version: 1.6 Getting Started For the purposes of this tutorial, we will assume that you have basic knowledge of Dojo Toolkit constructs such as dojo.query and other language-based helper functions, such as Dojo's Array helpers. Before we can understand how and when to use dojo.hitch and dojo.partial, we must first understand the problems they solve. One of the most misunderstood concepts in JavaScript is embodied in the simple, frequently-asked question, "What is this"? Execution Contexts in JavaScript Whenever a function is invoked in JavaScript, an execution context is created (see this article from Tuenti for some gruesome details).
Let's take a common example. View Demo View Demo View Demo View Demo. Real-time Stores. Web applications based on real-time stores give users a level of immediacy not possible with traditional web applications, allowing them to see data as it changes. The Dojo object store interface, which is the data model foundation of Dojo applications, was designed to support real-time data updates. In this tutorial we will see how to leverage the notification system to interact with real-time widgets. Difficulty: Intermediate Dojo Version: 1.6 Getting Started In this tutorial we are going to build on what we learned in the introduction to Dojo object stores and the data modeling tutorial.
In particular, in the data modeling tutorial we saw how to create a view renderer for query results that used the observe() method to monitor for changes. The essential entry point to monitoring data from a store is the observe() method, which is a method of the query results. The observe() method belongs to the result set because the meaning of notifications is contextualized to the result set. Working with Dates in Dojo. Dates can be awkward to work with in JavaScript. This tutorial walks through the use of dojo.date—Dojo's answer to the need for a standard library for date math, comparisons, parsing and formatting. Difficulty: Beginner Dojo Version: 1.6 Getting Started Dates can be some of the most complex objects to deal with in any software development environment; there are so many subtle and not-so-subtle issues with dates (which can introduce ambiguity and error) that even humans frequently get mixed up.
The Dojo Core includes utilities in the dojo.date modules to fill in many of the holes with date handling in JavaScript. We can't cover every method and every option here, so we'll taste a sample from each module to get a flavor of what they offer—and the kinds of tasks they can help you with. Common Date Operations with dojo.date The functions in the dojo.date module make common date-based tasks super easy. View Demo Date Calculations View Demo Date Comparisons View Demo ...And More Dates & Localization. Prototyping with dijit.Declaration. In this tutorial, you'll learn about the special dijit.Declaration widget, which was designed to allow you to quickly prototype custom widgets—all using declarative syntax. Difficulty: Intermediate Dojo Version: 1.6 Getting Started Have you ever had a need to develop a custom widget using Dijit's infrastructure? What if you wanted to quickly prototype something without having to go through infrastructure setup—such as creating your own namespace to develop in, setting up the correct directory structure, making sure the module paths are all correct, etc.?
What if you wanted to do all of it in a single HTML file, using declarative syntax? Dijit has a solution for you, in the form of dijit.Declaration. This is kind of a meta widget; the sole purpose of it is to let you define new widgets quickly, using the same kind of declarative syntax you would use to put widget instances on an HTML page. The Basic Concept Let's break down the code above. Defining Your Widget The widgetClass property View Demo. Vector Graphics with Dojo's GFX. Vector graphics can have many advantages, including flawless scaling with maximum portability.
The problem with vector graphic creation is that it can be difficult—but not so with Dojo's GFX library. GFX provides a simple and flexible API (along with other utilities) for creating, animating, and managing amazing vector graphics. Difficulty: Beginner Dojo Version: 1.6 Getting Started Vector graphics—the use of geometric "primitives" or shapes—is a time-honored way of creating images by using mathematical formulae to describe how to render something; unlike raster-based images (such as PNG and JPG files), which use a two dimensional array of colors.
There are several advantages to using vector graphics as opposed to fixed JPG/GIF images: Vector graphics have been in use for a long time; one of the most common examples is the use of PostScript to describe how to print something. Works on almost all devices Can render images (including charts) with SVG, VML, Silverlight, or Canvas.
View Demo. Get started with Dojo Mobile 1.7. Introduction Mobile web usage is growing exponentially. As more people become comfortable with smartphones, or other mobile devices, to browse the web, there's an increasing need for mobile-optimized websites and web applications. With the growing number of platforms (iOS, Android, Blackberry OS, webOS, Windows Phone, Symbian, Bada, and so on), it's difficult to develop native applications that target more than one mobile operating system. There has been a surge in demand for mobile web application development toolkits. In this article, you will learn about Dojo Mobile, which is an extension of the Dojo Toolkit.
Back to top Mobile web versus native applications The debate about developing a mobile application using native versus web platforms will likely continue for a good while. Why would you write a native application instead of using the mobile web? Table 1. Table 2 outlines the advantages and disadvantages of mobile web applications. Table 2. Dojo Mobile at a glance dojo.requireIf(! <! Forms and Validation. In this tutorial, you'll learn how to make use of the validation helpers in dojox.validate with your Dijit-based form widgets to create customizable, validating forms—all on the client side.
Difficulty: Beginner Dojo Version: 1.6 Getting Started dojox.validate is a set of utility functions for common validation tasks, such as checking for a valid e-mail address, valid ZIP code (both the US and Canada), valid phone numbers, and more. It was designed for pure programmatic use—but also for use by various validation-based Dijits. In this tutorial, we'll look at what's available in dojox.validate, how to use the functionality directly, and how to use the functionality with widgets such as dijit.form.ValidationTextBox. To get started, simply dojo.require the validation project, like so: That's all there is to it to get the basic validation functionality, which includes the following methods: It can also take an array of formats to check against, like so: Other Validation Methods View Demo View Demo.
Dojo Tutorial: Getting Jiggy with JSONP. You didn’t think that with just 18 days left until DojoConf 2011 we would leave you hanging and not post another tutorial in our new dojo tutorial everyday series did you? I thought not! Here’s today’s tutorial! Getting Jiggy with JSONP JSON with Padding (JSONP) has become a common technique for accessing cross-domain resources from the browser. In this tutorial you learn what JSONP is and how you can use it to retrieve data from cross-domain sources. Check out the tutorial. Want to see a specific Tutorial? Is there something you’d like to learn how to do with Dojo?