SlideShare uma empresa Scribd logo
1 de 25
Baixar para ler offline
Richard Paul
Kiwiplan NZ Ltd
 17 Feb 2009
Dojo Tookit
http://dojotoolkit.org/



The Dojo Toolkit is an open source modular JavaScript library
[...] designed to ease the rapid development of cross platform,
JavaScript/Ajax based applications and web sites.

                          -- http://en.wikipedia.org/wiki/Dojo_Toolkit

Current version: 1.2.3
Next version: 1.3.0
dojo.query

Returns nodes which match the given CSS3 selector,
searching the entire document by default but optionally taking a
node to scope the search by. Returns an instance of dojo.
NodeList. -- http://api.dojotoolkit.org/

// Find all nodes with the class 'draggable'
var draggable = dojo.query('.draggable')

// Search in the subtree of an existing node
var myList = dojo.byId('myList')
var items = dojo.query('li', myList)

// Advanced CSS 3 selectors (regardless of browser)
:nth-child(odd), :not(...)
dojo.NodeList
dojo.NodeList is as subclass of Array which adds syntactic
sugar for chaining, common iteration operations, animation,
and node manipulation. NodeLists are most often returned as
the result of dojo.query() calls. -- http://api.dojotoolkit.org/

// Set onclick handler for all lists (ordered and
unordered)
dojo.query('ol, ul').onclick(function(event) { })

// Iterator over items in list
dojo.query('ol li, ul li').forEach(function() { })

// Empty the snippet list
dojo.query('#snippets').empty()

// Use camel-case naming to set CSS properties
dojo.query('#snippets li').style('backgroundColor',
'blue')
dojo.NodeList-fx
Fancy animations for your nodelist


// Include the NodeList animation package
dojo.require(quot;dojo.NodeList-fxquot;);

// Fade out all items
dojo.query('.items').fadeOut() // Opposite is fadeIn

// Wipe out all items
dojo.query('.items').wipeOut() // Opposite is wipeIn

// Animate CSS properties
dojo.query('#item').anim({width: '800', height: '300'})

// Even works for colours and for custom durations
dojo.query('#output').anim({backgroundColor: '#afa'},
4000)
Declaring Classes
Creating your own classes in Dojo


dojo.declare('className', superClass, property map)
dojo.declare('Logger', null, {
   constructor: function(outputId) {
      this.node = dojo.byId(outputId)
   },
   log: function(text) {
      if (text == undefined)
        return
      this.node.innerHTML += '<br/>' + text
   },
   clear: function() {
      new dojo.NodeList(this.node).empty()
   }
})

var logger = new Logger('output')
dojo.connect

Allows function to be trigger when event occur.

// Call logger.clear() when terminal.load() is called
dojo.connect(terminal, 'load', logger, 'clear')

Passes the same arguments as passed to load to the clear
function.

terminal.load('mySnippet') // => log is cleared
dojo.behavior
Unobtrusive javascript (note the US spelling)


dojo.behavior.add({
   '#snippetList a': {
      'onclick': function(e) {
        terminal.load(e.target.id)
      }
   },
   '#run': {
      'onclick': function(e) {
        terminal.run()
      }
   },
   '#clear': {
      'onclick': function() {
        logger.clear()
      }
   }
})

dojo.behavior.apply()
Dojo Topics
dojo.publish, dojo.subscribe


Anonymous communication is available in Dojo via topics.

// Set up subsciber
dojo.subscribe('topic', object, 'method')
// Publish data to the topic
dojo.publish('topic', ['a message'])

// Multiple arguments (mapped using apply)
dojo.subscribe('topic', null, function(a, b) {
   alert(a + ':' + b)
})
dojo.publish('topic', ['one', 'two']) // => one:two

// Unsubscribing
var handle = dojo.subscribe(...)
dojo.unsubscribe(handle)
dojo.xhrGet
Simple AJAX calls


dojo.xhrGet({
   url: 'service/sessions/1',
   load: function(data) {
     logger.log(data)
   }
})

// Compared with a raw request
var request = new XMLHttpRequest()
request.open('GET', 'service/sessions/1', true)
request.onreadystatechange = function () {
  if (request.readyState == 4) { // 4 = loaded
    if (request.status == 200) { // 200 = success
      logger.log(request.responseText) // or responseXML
    }
  }
}
request.send(null)
dojo.xhrPost
Posting data using Dojo


dojo.xhrPost({
   url: 'service/addSession',
   content: {
      name: 'Groovy',
      speaker: 'Kugan',
      date: '17 April 2009 15:00'
   },
   load: function(data) {
      logger.log(data)
   }
})
dojo.xhrPost form submission
Posting a form using xhrPost


dojo.xhrPost({
   url: 'service/addSession',
   form: 'formId',
   load: function(data) {
     logger.log(data)
   }
})

This approach takes a regular HTML form and submits it via XHR. Using dojo.
connect can override default form behaviour.
dojo.connect(myForm, 'onsubmit', null, function(e) {
  e.preventDefault() // Cancel regular submit
  dojo.xhrPost(...)           // Submit via XHR
}
Dijit
Widgets for Dojo

Dojo provides a wide range of widgets including:
   Layout widgets (tabs, accordion, content pane, ...)
   Form widgets (drop down button, number spinner, date
   pickers, popups)
   Strong internationalisation support.
   http://dojocampus.org/explorer/ for more examples

All widgets are themeable with Dojo including 3 default themes:




                                                    Nihilo
                              Soria
         Tundra
Creating tabs
Using dijit.layout.TabContainer


<html>
 ...
 <div id=quot;tabsquot;>
   <div id=quot;Runquot;>...</div>
   <div id=quot;Instructionsquot;>...</div>
   ...
 </div>
</html>
Widgets from code

dojo.require(quot;dijit.layout.TabContainerquot;);
dojo.require(quot;dijit.layout.ContentPanequot;);
dojo.addOnLoad(function() {
    // Construct tab content panes
    dojo.query(quot;#tabs > divquot;).forEach(function(n) {
        new dijit.layout.ContentPane({
            title: dojo.attr(n,quot;titlequot;) // Use node title
        }, n);
    });
    // Create outer tab container
    var container = new dijit.layout.TabContainer(
                      {},quot;tabsquot;);
    container.startup();
});
Widgets from markup

<div id=quot;parseMequot;>
  <div id=quot;tabsquot; dojoType=quot;dijit.layout.TabContainerquot;>
    <div id=quot;Tab 1quot; dojoType=quot;dijit.layout.ContentPanequot;>
       Tab 1 content
    </div>
    <div id=quot;Tab 2quot; dojoType=quot;dijit.layout.ContentPanequot;>
       Tab 2 content
    </div>
  </div>
</div>

dojo.require('dojo.parser')
dojo.addOnLoad(function() {
   dojo.parser.parse(dojo.byId('parseMe'))
})
Validated forms
<input id=quot;newSessionStartDatequot; name=quot;startDatequot; type=quot;textquot;
    dojoType=quot;dijit.form.DateTextBoxquot; required=quot;truequot;
    constraints=quot;{
       datePattern:'dd MMM yyyy',
       strict:true,max:new Date()
    }quot;
    invalidMessage=quot;Please enter a date in the format of 'dd MMM yyyy'quot;
    promptMessage=quot;Please enter a date.quot;
    rangeMessage=quot;Please enter a non-future date.quot;
/>
DojoX
quot;The future, todayquot;



Includes new and innovative code that isn't deemed stable
enough for dojo or dijit.

    Charting
    Grid
    Comet (server push)
    Offline support / Google gears
Charting
Browser independent support for vector graphics.
    IE = VML
    Firefox, Safari, Opera = SVG
Provides an abstraction API over the underlying drawing
libraries.




http://dojocampus.org/explorer/#Dojox_Charting_2D_Updating
Grid
Grid/table widget that has support for editing, sorting and
continuous scrolling.




http://dojocampus.org/explorer/#Dojox_Grid_Edit%20Dijit
Including Dojo in your web page

AOL CDN
<script type=quot;text/javascriptquot; src=quot;http://o.aolcdn.com/dojo/1.
2.3/dojo/dojo.xd.jsquot;></script>
http://dev.aol.com/dojo

Google CDN
<script type=quot;text/javascriptquot; src=quot;http://ajax.googleapis.
com/ajax/libs/dojo/1.2.3/dojo/dojo.xd.jsquot;></script>
http://code.google.com/apis/ajaxlibs/documentation/#dojo
Can also use google.load(1.2) to get latest 1.2 release.

Local
<script type=quot;text/javascriptquot; src=quot;/path/to/my/dojo.jsquot;></script>
Using Dijit Themes

To have dijits show up correctly you need to include the CSS file for the
theme. Either from a CDN or from a local copy.

<head>
  <link rel=quot;stylesheetquot; type=quot;text/cssquot;
    href=quot;http://o.aolcdn.com/dojo/1.2.3
/dijit/themes/tundra/tundra.cssquot;/>
  ...
</head>

<div class=quot;tundraquot;>
  <div dojoType=quot;dijit.Xxxquot;></div>
</div>
Dojo Web Performance




Each dojo.require() pulls in files one by one causing a slow client.
Baking a Profile
Dojo supports layers, where additional functionality can be baked into
a single javascript file to be served efficiently to the client. This file can
then be cached by browsers to makes the page load even faster.
dependencies = {
   layers: [
      {
        name: quot;mylayer.jsquot;,
        dependencies: [
          quot;dojo.behaviorquot;,
          quot;dijit.layout.TabContainerquot;,
          quot;dijit.layout.ContentPanequot;
        ]
      }
   ],
   prefixes: [
      [ quot;dijitquot;, quot;../dijitquot; ],
      [ quot;dojoxquot;, quot;../dojoxquot; ]
   ]
};
Useful links/feeds

  http://www.dojotoolkit.org
  http://api.dojotoolkit.org
  http://dojocampus.org/explorer/
  http://dojocampus.org/content/category/dojo-cookies/
  http://dev.opera.com/articles/view/introducing-the-dojo-
  toolkit/
  http://www.javaworld.com/javaworld/jw-01-2009/jw-01-
  introduction-to-dojo-1.html


                     Any questions?

Mais conteúdo relacionado

Mais procurados

Building an api using golang and postgre sql v1.0
Building an api using golang and postgre sql v1.0Building an api using golang and postgre sql v1.0
Building an api using golang and postgre sql v1.0Frost
 
Node js mongodriver
Node js mongodriverNode js mongodriver
Node js mongodriverchristkv
 
Intro to MongoDB and datamodeling
Intro to MongoDB and datamodeling Intro to MongoDB and datamodeling
Intro to MongoDB and datamodeling rogerbodamer
 
Building High Performance Web Applications and Sites
Building High Performance Web Applications and SitesBuilding High Performance Web Applications and Sites
Building High Performance Web Applications and Sitesgoodfriday
 
Beginning icloud development - Cesare Rocchi - WhyMCA
Beginning icloud development - Cesare Rocchi - WhyMCABeginning icloud development - Cesare Rocchi - WhyMCA
Beginning icloud development - Cesare Rocchi - WhyMCAWhymca
 
Introduction to Active Record - Silicon Valley Ruby Conference 2007
Introduction to Active Record - Silicon Valley Ruby Conference 2007Introduction to Active Record - Silicon Valley Ruby Conference 2007
Introduction to Active Record - Silicon Valley Ruby Conference 2007Rabble .
 
Intorduction of Playframework
Intorduction of PlayframeworkIntorduction of Playframework
Intorduction of Playframeworkmaltiyadav
 
Relaxing With CouchDB
Relaxing With CouchDBRelaxing With CouchDB
Relaxing With CouchDBleinweber
 
Windows ストアーアプリで SQLite を使ってみよう
Windows ストアーアプリで SQLite を使ってみようWindows ストアーアプリで SQLite を使ってみよう
Windows ストアーアプリで SQLite を使ってみようShinichiAoyagi
 
Javascript Templating
Javascript TemplatingJavascript Templating
Javascript Templatingbcruhl
 
Softshake - Offline applications
Softshake - Offline applicationsSoftshake - Offline applications
Softshake - Offline applicationsjeromevdl
 
Storing tree structures with MongoDB
Storing tree structures with MongoDBStoring tree structures with MongoDB
Storing tree structures with MongoDBVyacheslav
 
¿Cómo de sexy puede hacer Backbone mi código?
¿Cómo de sexy puede hacer Backbone mi código?¿Cómo de sexy puede hacer Backbone mi código?
¿Cómo de sexy puede hacer Backbone mi código?jaespinmora
 
iOS State Preservation and Restoration
iOS State Preservation and RestorationiOS State Preservation and Restoration
iOS State Preservation and RestorationRobert Brown
 
Data access 2.0? Please welcome: Spring Data!
Data access 2.0? Please welcome: Spring Data!Data access 2.0? Please welcome: Spring Data!
Data access 2.0? Please welcome: Spring Data!Oliver Gierke
 

Mais procurados (20)

Building an api using golang and postgre sql v1.0
Building an api using golang and postgre sql v1.0Building an api using golang and postgre sql v1.0
Building an api using golang and postgre sql v1.0
 
Node js mongodriver
Node js mongodriverNode js mongodriver
Node js mongodriver
 
J query lecture 1
J query lecture 1J query lecture 1
J query lecture 1
 
Intro to MongoDB and datamodeling
Intro to MongoDB and datamodeling Intro to MongoDB and datamodeling
Intro to MongoDB and datamodeling
 
Building High Performance Web Applications and Sites
Building High Performance Web Applications and SitesBuilding High Performance Web Applications and Sites
Building High Performance Web Applications and Sites
 
JSON
JSONJSON
JSON
 
Beginning icloud development - Cesare Rocchi - WhyMCA
Beginning icloud development - Cesare Rocchi - WhyMCABeginning icloud development - Cesare Rocchi - WhyMCA
Beginning icloud development - Cesare Rocchi - WhyMCA
 
Introduction to Active Record - Silicon Valley Ruby Conference 2007
Introduction to Active Record - Silicon Valley Ruby Conference 2007Introduction to Active Record - Silicon Valley Ruby Conference 2007
Introduction to Active Record - Silicon Valley Ruby Conference 2007
 
Intorduction of Playframework
Intorduction of PlayframeworkIntorduction of Playframework
Intorduction of Playframework
 
Relaxing With CouchDB
Relaxing With CouchDBRelaxing With CouchDB
Relaxing With CouchDB
 
Windows ストアーアプリで SQLite を使ってみよう
Windows ストアーアプリで SQLite を使ってみようWindows ストアーアプリで SQLite を使ってみよう
Windows ストアーアプリで SQLite を使ってみよう
 
IT6801-Service Oriented Architecture-Unit-2-notes
IT6801-Service Oriented Architecture-Unit-2-notesIT6801-Service Oriented Architecture-Unit-2-notes
IT6801-Service Oriented Architecture-Unit-2-notes
 
Javascript Templating
Javascript TemplatingJavascript Templating
Javascript Templating
 
Softshake - Offline applications
Softshake - Offline applicationsSoftshake - Offline applications
Softshake - Offline applications
 
Storing tree structures with MongoDB
Storing tree structures with MongoDBStoring tree structures with MongoDB
Storing tree structures with MongoDB
 
¿Cómo de sexy puede hacer Backbone mi código?
¿Cómo de sexy puede hacer Backbone mi código?¿Cómo de sexy puede hacer Backbone mi código?
¿Cómo de sexy puede hacer Backbone mi código?
 
Green dao
Green daoGreen dao
Green dao
 
Data Binding in qooxdoo
Data Binding in qooxdooData Binding in qooxdoo
Data Binding in qooxdoo
 
iOS State Preservation and Restoration
iOS State Preservation and RestorationiOS State Preservation and Restoration
iOS State Preservation and Restoration
 
Data access 2.0? Please welcome: Spring Data!
Data access 2.0? Please welcome: Spring Data!Data access 2.0? Please welcome: Spring Data!
Data access 2.0? Please welcome: Spring Data!
 

Destaque

Provisioning and Capacity Planning Workshop (Dogpatch Labs, September 2015)
Provisioning and Capacity Planning Workshop (Dogpatch Labs, September 2015)Provisioning and Capacity Planning Workshop (Dogpatch Labs, September 2015)
Provisioning and Capacity Planning Workshop (Dogpatch Labs, September 2015)Brian Brazil
 
Introduction to Spring's Dependency Injection
Introduction to Spring's Dependency InjectionIntroduction to Spring's Dependency Injection
Introduction to Spring's Dependency InjectionRichard Paul
 
Unit Testing Fundamentals
Unit Testing FundamentalsUnit Testing Fundamentals
Unit Testing FundamentalsRichard Paul
 
Javascript & Ajax Basics
Javascript & Ajax BasicsJavascript & Ajax Basics
Javascript & Ajax BasicsRichard Paul
 
Composer the Right Way - PHPSRB16
Composer the Right Way - PHPSRB16Composer the Right Way - PHPSRB16
Composer the Right Way - PHPSRB16Rafael Dohms
 
Converting Static Html To Drupal Theme
Converting Static Html To Drupal ThemeConverting Static Html To Drupal Theme
Converting Static Html To Drupal ThemeRyan Cross
 
Introduction to Spring MVC
Introduction to Spring MVCIntroduction to Spring MVC
Introduction to Spring MVCRichard Paul
 
Mocking in Java with Mockito
Mocking in Java with MockitoMocking in Java with Mockito
Mocking in Java with MockitoRichard Paul
 

Destaque (9)

Provisioning and Capacity Planning Workshop (Dogpatch Labs, September 2015)
Provisioning and Capacity Planning Workshop (Dogpatch Labs, September 2015)Provisioning and Capacity Planning Workshop (Dogpatch Labs, September 2015)
Provisioning and Capacity Planning Workshop (Dogpatch Labs, September 2015)
 
Introduction to Spring's Dependency Injection
Introduction to Spring's Dependency InjectionIntroduction to Spring's Dependency Injection
Introduction to Spring's Dependency Injection
 
Unit Testing Fundamentals
Unit Testing FundamentalsUnit Testing Fundamentals
Unit Testing Fundamentals
 
Javascript & Ajax Basics
Javascript & Ajax BasicsJavascript & Ajax Basics
Javascript & Ajax Basics
 
Composer the Right Way - PHPSRB16
Composer the Right Way - PHPSRB16Composer the Right Way - PHPSRB16
Composer the Right Way - PHPSRB16
 
Converting Static Html To Drupal Theme
Converting Static Html To Drupal ThemeConverting Static Html To Drupal Theme
Converting Static Html To Drupal Theme
 
Introduction to Spring MVC
Introduction to Spring MVCIntroduction to Spring MVC
Introduction to Spring MVC
 
Mocking in Java with Mockito
Mocking in Java with MockitoMocking in Java with Mockito
Mocking in Java with Mockito
 
Rewrites überleben
Rewrites überlebenRewrites überleben
Rewrites überleben
 

Semelhante a Using Dojo

Dojo: Getting Started Today
Dojo: Getting Started TodayDojo: Getting Started Today
Dojo: Getting Started TodayGabriel Hamilton
 
Dojo: Beautiful Web Apps, Fast
Dojo: Beautiful Web Apps, FastDojo: Beautiful Web Apps, Fast
Dojo: Beautiful Web Apps, FastGabriel Hamilton
 
the next web now
the next web nowthe next web now
the next web nowzulin Gu
 
The Dojo Build System
The Dojo Build SystemThe Dojo Build System
The Dojo Build Systemklipstein
 
Developing a Joomla 3.x Component using RAD FOF- Part 2: Front-end + demo - J...
Developing a Joomla 3.x Component using RAD FOF- Part 2: Front-end + demo - J...Developing a Joomla 3.x Component using RAD FOF- Part 2: Front-end + demo - J...
Developing a Joomla 3.x Component using RAD FOF- Part 2: Front-end + demo - J...Peter Martin
 
Building Dojo in the Cloud
Building Dojo in the CloudBuilding Dojo in the Cloud
Building Dojo in the CloudJames Thomas
 
Customizing the Document Library
Customizing the Document LibraryCustomizing the Document Library
Customizing the Document LibraryAlfresco Software
 
Introduction To Dojo
Introduction To DojoIntroduction To Dojo
Introduction To Dojoyoavrubin
 
DWR, Hibernate and Dojo.E - A Tutorial
DWR, Hibernate and Dojo.E - A TutorialDWR, Hibernate and Dojo.E - A Tutorial
DWR, Hibernate and Dojo.E - A Tutorialjbarciauskas
 

Semelhante a Using Dojo (20)

Dojo: Getting Started Today
Dojo: Getting Started TodayDojo: Getting Started Today
Dojo: Getting Started Today
 
dojo.Patterns
dojo.Patternsdojo.Patterns
dojo.Patterns
 
my test
my testmy test
my test
 
Dojo: Beautiful Web Apps, Fast
Dojo: Beautiful Web Apps, FastDojo: Beautiful Web Apps, Fast
Dojo: Beautiful Web Apps, Fast
 
Dojo1.0_Tutorials
Dojo1.0_TutorialsDojo1.0_Tutorials
Dojo1.0_Tutorials
 
Dojo1.0_Tutorials
Dojo1.0_TutorialsDojo1.0_Tutorials
Dojo1.0_Tutorials
 
Jquery fundamentals
Jquery fundamentalsJquery fundamentals
Jquery fundamentals
 
Test02
Test02Test02
Test02
 
jQuery
jQueryjQuery
jQuery
 
the next web now
the next web nowthe next web now
the next web now
 
Dart Workshop
Dart WorkshopDart Workshop
Dart Workshop
 
The Dojo Build System
The Dojo Build SystemThe Dojo Build System
The Dojo Build System
 
前端概述
前端概述前端概述
前端概述
 
Dojo and Adobe AIR
Dojo and Adobe AIRDojo and Adobe AIR
Dojo and Adobe AIR
 
Trimming The Cruft
Trimming The CruftTrimming The Cruft
Trimming The Cruft
 
Developing a Joomla 3.x Component using RAD FOF- Part 2: Front-end + demo - J...
Developing a Joomla 3.x Component using RAD FOF- Part 2: Front-end + demo - J...Developing a Joomla 3.x Component using RAD FOF- Part 2: Front-end + demo - J...
Developing a Joomla 3.x Component using RAD FOF- Part 2: Front-end + demo - J...
 
Building Dojo in the Cloud
Building Dojo in the CloudBuilding Dojo in the Cloud
Building Dojo in the Cloud
 
Customizing the Document Library
Customizing the Document LibraryCustomizing the Document Library
Customizing the Document Library
 
Introduction To Dojo
Introduction To DojoIntroduction To Dojo
Introduction To Dojo
 
DWR, Hibernate and Dojo.E - A Tutorial
DWR, Hibernate and Dojo.E - A TutorialDWR, Hibernate and Dojo.E - A Tutorial
DWR, Hibernate and Dojo.E - A Tutorial
 

Último

Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsSeth Reyes
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemAsko Soukka
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdfPedro Manuel
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.YounusS2
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Adtran
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IES VE
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarPrecisely
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationIES VE
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioChristian Posta
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfJamie (Taka) Wang
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsSafe Software
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-pyJamie (Taka) Wang
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024D Cloud Solutions
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDELiveplex
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfDianaGray10
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...DianaGray10
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8DianaGray10
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintMahmoud Rabie
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureEric D. Schabell
 

Último (20)

Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and Hazards
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystem
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdf
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity Webinar
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and Istio
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-py
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership Blueprint
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability Adventure
 
20230104 - machine vision
20230104 - machine vision20230104 - machine vision
20230104 - machine vision
 

Using Dojo

  • 1. Richard Paul Kiwiplan NZ Ltd 17 Feb 2009
  • 2. Dojo Tookit http://dojotoolkit.org/ The Dojo Toolkit is an open source modular JavaScript library [...] designed to ease the rapid development of cross platform, JavaScript/Ajax based applications and web sites. -- http://en.wikipedia.org/wiki/Dojo_Toolkit Current version: 1.2.3 Next version: 1.3.0
  • 3. dojo.query Returns nodes which match the given CSS3 selector, searching the entire document by default but optionally taking a node to scope the search by. Returns an instance of dojo. NodeList. -- http://api.dojotoolkit.org/ // Find all nodes with the class 'draggable' var draggable = dojo.query('.draggable') // Search in the subtree of an existing node var myList = dojo.byId('myList') var items = dojo.query('li', myList) // Advanced CSS 3 selectors (regardless of browser) :nth-child(odd), :not(...)
  • 4. dojo.NodeList dojo.NodeList is as subclass of Array which adds syntactic sugar for chaining, common iteration operations, animation, and node manipulation. NodeLists are most often returned as the result of dojo.query() calls. -- http://api.dojotoolkit.org/ // Set onclick handler for all lists (ordered and unordered) dojo.query('ol, ul').onclick(function(event) { }) // Iterator over items in list dojo.query('ol li, ul li').forEach(function() { }) // Empty the snippet list dojo.query('#snippets').empty() // Use camel-case naming to set CSS properties dojo.query('#snippets li').style('backgroundColor', 'blue')
  • 5. dojo.NodeList-fx Fancy animations for your nodelist // Include the NodeList animation package dojo.require(quot;dojo.NodeList-fxquot;); // Fade out all items dojo.query('.items').fadeOut() // Opposite is fadeIn // Wipe out all items dojo.query('.items').wipeOut() // Opposite is wipeIn // Animate CSS properties dojo.query('#item').anim({width: '800', height: '300'}) // Even works for colours and for custom durations dojo.query('#output').anim({backgroundColor: '#afa'}, 4000)
  • 6. Declaring Classes Creating your own classes in Dojo dojo.declare('className', superClass, property map) dojo.declare('Logger', null, { constructor: function(outputId) { this.node = dojo.byId(outputId) }, log: function(text) { if (text == undefined) return this.node.innerHTML += '<br/>' + text }, clear: function() { new dojo.NodeList(this.node).empty() } }) var logger = new Logger('output')
  • 7. dojo.connect Allows function to be trigger when event occur. // Call logger.clear() when terminal.load() is called dojo.connect(terminal, 'load', logger, 'clear') Passes the same arguments as passed to load to the clear function. terminal.load('mySnippet') // => log is cleared
  • 8. dojo.behavior Unobtrusive javascript (note the US spelling) dojo.behavior.add({ '#snippetList a': { 'onclick': function(e) { terminal.load(e.target.id) } }, '#run': { 'onclick': function(e) { terminal.run() } }, '#clear': { 'onclick': function() { logger.clear() } } }) dojo.behavior.apply()
  • 9. Dojo Topics dojo.publish, dojo.subscribe Anonymous communication is available in Dojo via topics. // Set up subsciber dojo.subscribe('topic', object, 'method') // Publish data to the topic dojo.publish('topic', ['a message']) // Multiple arguments (mapped using apply) dojo.subscribe('topic', null, function(a, b) { alert(a + ':' + b) }) dojo.publish('topic', ['one', 'two']) // => one:two // Unsubscribing var handle = dojo.subscribe(...) dojo.unsubscribe(handle)
  • 10. dojo.xhrGet Simple AJAX calls dojo.xhrGet({ url: 'service/sessions/1', load: function(data) { logger.log(data) } }) // Compared with a raw request var request = new XMLHttpRequest() request.open('GET', 'service/sessions/1', true) request.onreadystatechange = function () { if (request.readyState == 4) { // 4 = loaded if (request.status == 200) { // 200 = success logger.log(request.responseText) // or responseXML } } } request.send(null)
  • 11. dojo.xhrPost Posting data using Dojo dojo.xhrPost({ url: 'service/addSession', content: { name: 'Groovy', speaker: 'Kugan', date: '17 April 2009 15:00' }, load: function(data) { logger.log(data) } })
  • 12. dojo.xhrPost form submission Posting a form using xhrPost dojo.xhrPost({ url: 'service/addSession', form: 'formId', load: function(data) { logger.log(data) } }) This approach takes a regular HTML form and submits it via XHR. Using dojo. connect can override default form behaviour. dojo.connect(myForm, 'onsubmit', null, function(e) { e.preventDefault() // Cancel regular submit dojo.xhrPost(...) // Submit via XHR }
  • 13. Dijit Widgets for Dojo Dojo provides a wide range of widgets including: Layout widgets (tabs, accordion, content pane, ...) Form widgets (drop down button, number spinner, date pickers, popups) Strong internationalisation support. http://dojocampus.org/explorer/ for more examples All widgets are themeable with Dojo including 3 default themes: Nihilo Soria Tundra
  • 14. Creating tabs Using dijit.layout.TabContainer <html> ... <div id=quot;tabsquot;> <div id=quot;Runquot;>...</div> <div id=quot;Instructionsquot;>...</div> ... </div> </html>
  • 15. Widgets from code dojo.require(quot;dijit.layout.TabContainerquot;); dojo.require(quot;dijit.layout.ContentPanequot;); dojo.addOnLoad(function() { // Construct tab content panes dojo.query(quot;#tabs > divquot;).forEach(function(n) { new dijit.layout.ContentPane({ title: dojo.attr(n,quot;titlequot;) // Use node title }, n); }); // Create outer tab container var container = new dijit.layout.TabContainer( {},quot;tabsquot;); container.startup(); });
  • 16. Widgets from markup <div id=quot;parseMequot;> <div id=quot;tabsquot; dojoType=quot;dijit.layout.TabContainerquot;> <div id=quot;Tab 1quot; dojoType=quot;dijit.layout.ContentPanequot;> Tab 1 content </div> <div id=quot;Tab 2quot; dojoType=quot;dijit.layout.ContentPanequot;> Tab 2 content </div> </div> </div> dojo.require('dojo.parser') dojo.addOnLoad(function() { dojo.parser.parse(dojo.byId('parseMe')) })
  • 17. Validated forms <input id=quot;newSessionStartDatequot; name=quot;startDatequot; type=quot;textquot; dojoType=quot;dijit.form.DateTextBoxquot; required=quot;truequot; constraints=quot;{ datePattern:'dd MMM yyyy', strict:true,max:new Date() }quot; invalidMessage=quot;Please enter a date in the format of 'dd MMM yyyy'quot; promptMessage=quot;Please enter a date.quot; rangeMessage=quot;Please enter a non-future date.quot; />
  • 18. DojoX quot;The future, todayquot; Includes new and innovative code that isn't deemed stable enough for dojo or dijit. Charting Grid Comet (server push) Offline support / Google gears
  • 19. Charting Browser independent support for vector graphics. IE = VML Firefox, Safari, Opera = SVG Provides an abstraction API over the underlying drawing libraries. http://dojocampus.org/explorer/#Dojox_Charting_2D_Updating
  • 20. Grid Grid/table widget that has support for editing, sorting and continuous scrolling. http://dojocampus.org/explorer/#Dojox_Grid_Edit%20Dijit
  • 21. Including Dojo in your web page AOL CDN <script type=quot;text/javascriptquot; src=quot;http://o.aolcdn.com/dojo/1. 2.3/dojo/dojo.xd.jsquot;></script> http://dev.aol.com/dojo Google CDN <script type=quot;text/javascriptquot; src=quot;http://ajax.googleapis. com/ajax/libs/dojo/1.2.3/dojo/dojo.xd.jsquot;></script> http://code.google.com/apis/ajaxlibs/documentation/#dojo Can also use google.load(1.2) to get latest 1.2 release. Local <script type=quot;text/javascriptquot; src=quot;/path/to/my/dojo.jsquot;></script>
  • 22. Using Dijit Themes To have dijits show up correctly you need to include the CSS file for the theme. Either from a CDN or from a local copy. <head> <link rel=quot;stylesheetquot; type=quot;text/cssquot; href=quot;http://o.aolcdn.com/dojo/1.2.3 /dijit/themes/tundra/tundra.cssquot;/> ... </head> <div class=quot;tundraquot;> <div dojoType=quot;dijit.Xxxquot;></div> </div>
  • 23. Dojo Web Performance Each dojo.require() pulls in files one by one causing a slow client.
  • 24. Baking a Profile Dojo supports layers, where additional functionality can be baked into a single javascript file to be served efficiently to the client. This file can then be cached by browsers to makes the page load even faster. dependencies = { layers: [ { name: quot;mylayer.jsquot;, dependencies: [ quot;dojo.behaviorquot;, quot;dijit.layout.TabContainerquot;, quot;dijit.layout.ContentPanequot; ] } ], prefixes: [ [ quot;dijitquot;, quot;../dijitquot; ], [ quot;dojoxquot;, quot;../dojoxquot; ] ] };
  • 25. Useful links/feeds http://www.dojotoolkit.org http://api.dojotoolkit.org http://dojocampus.org/explorer/ http://dojocampus.org/content/category/dojo-cookies/ http://dev.opera.com/articles/view/introducing-the-dojo- toolkit/ http://www.javaworld.com/javaworld/jw-01-2009/jw-01- introduction-to-dojo-1.html Any questions?