Scribd Logo
Carica

Benvenuto in Scribd!

  • How Dojo Works

    Caricato da

    sajithanazer
    57 visualizzazioni34 pagine
    Explains about Dojo Architecture. How to download and install.

    Copyright

    © © All Rights Reserved

    Formati disponibili

    PPT, PDF, TXT o leggi online da Scribd

    Hai trovato utile questo documento?

    Questo contenuto è inappropriato?

    Segnala questo documento
    Explains about Dojo Architecture. How to download and install.

    Copyright:

    © All Rights Reserved
    Scarica in formato PPT, PDF, TXT o leggi online su Scribd
    Segnala contenuti inappropriati
    57 visualizzazioni34 pagine

    How Dojo Works

    Caricato da

    sajithanazer
    Explains about Dojo Architecture. How to download and install.

    Copyright:

    © All Rights Reserved
    Scarica in formato PPT, PDF, TXT o leggi online su Scribd
    Segnala contenuti inappropriati
    di 34

    How Dojo works

    Dojo Introduction
    Dojo is a powerful, open source JavaScript
    toolkit (library).
    Dojo provide uniform access to Browser APIs
    and encapsulates JavaScript
    implementations.
    Dojo provides pluggable widgets UI(Dijit).

    Why Dojo?
    Dojo makes creating Web applications ( web
    2.0) simpler and quick.
    Helps in handling of the Cross Browser
    Development.

    How to get Dojo


    Download from
    http://download.dojotoolkit.org
    SVN and git checkout also available.

    Dojo Architecture

    Dojo Base
    Size 26KB (gzipped)
    Bootstrap
    Host and Browser detection (browser,
    SpiderMonkey, Rhino, Appcelerator
    Titanium, AIR)
    Package system
    JavaScript enhancements
    Query, DOM, Ajax, Events, FX

    Getting Started
    <html>
    <head>
    <title>Dojo!</title>
    <script type="text/javascript"
    src="/path/to/dojo.js"> </script>
    </head>
    <body> </body>
    </html>

    djConfig
    <script type="text/javascript"
    src="/path/to/dojo.js
    djConfig="isDebug:true,parseOnLoad:true"
    ></script>

    debugAtAllCosts: true/false
    locale: 'ja-jp'
    extraLocale: 'zn-ch'
    baseUrl:
    'http://www.domain.com/path/to/dojotoolkit'
    modulePaths: {'cb1','/js/cb1'}
    afterOnLoad: true/false
    addOnLoad: function/array

    djConfig.isDebug

    Dojo comes with Firebug lite, if FireBug is


    not installed .

    Package System
    dojo.require("dojo.fx")
    Downloads /path/to/dojotoolkit/dojo/fx.js

    dojo.registerModulePath("cb1", "/js/cb1")
    dojo.require("cb1.module")
    Downloads /js/cb1/module.js

    dojo.require("blah.module")
    404 Error: /path/to/dojotoolkit/some/module.js

    dojo.provide("cb1.module")

    Browser Detection
    dojo.isMoz
    dojo.isFF
    dojo.isIE
    dojo.isAIR
    dojo.isOpera
    dojo.isKhtml
    dojo.isWebKit
    dojo.isSafari
    dojo.isChrome
    dojo.isQuirks

    Classes and Inheritance


    dojo.declare()
    <script type="text/javascript">
    dojo.declare("MyObj", null, {
    say: function(msg){ console.log(msg); }
    });
    var obj = new MyObj;
    obj.say("Hi!");
    </script>

    dojo.extend()
    <script type="text/javascript">
    dojo.extend(MyObj, {
    sayUpperCase: function(msg){ this.say(msg.toUpperCase()); }
    });
    var obj = new MyObj;
    obj.sayUpperCase("Hi!");
    </script>

    Contd.
    dojo.mixin()
    <script type="text/javascript">
    var obj = { firstName: "chris", lastName:
    "barber" };
    var emp = dojo.mixin({ title: "hacker" }, obj);
    </script>

    dojo.query()
    <script type="text/javascript">
    var nodes = dojo.query("li"); // can use CSS3
    selectors
    dojo.query("a").forEach(function(n){
    n.innerHTML += "!!";
    });
    dojo.query("div").style({ padding:"1px",
    margin:"0px" });
    </script>

    DOM functions
    dojo.byId()
    dojo.body()
    dojo.create()
    dojo.destroy()
    dojo.attr()
    dojo.style()
    dojo.place()

    Events
    dojo.addOnLoad()
    dojo.addOnUnload()
    dojo.connect()/ dojo.disconnect()
    dojo.subscribe
    dojo.publish
    dojo.unsubscribe()

    AJAX
    dojo.xhr()
    dojo.xhrGet()
    dojo.xhrPost()
    dojo.deferred

    FX
    dojo.fadeIn(), dojo.fadeOut()
    dojo.animateProperty()

    Dojo Core

    Dojo Core

    Unified Data API

    Drag n Drop

    dojo.fx

    Internationalizati
    on

    dojo.dnd

    Advanced FX

    dojo.data

    dojo.i18n

    Google Gears

    dojo.gears

    Utilities

    dojo.string

    dojo.date

    dojo.regexp
    I/O Transports

    dojo.io.iframe

    dojo.io.script

    dojo.rpc
    Browser History

    Dijit

    What is Dijit?
    Dojo's widget system
    Huge library of existing widgets

    Form elements
    Buttons, drop downs, input fields, etc

    Layout widgets

    Content pane, accordions, tab container, stack


    container, etc

    Rich experience widgets

    Tree, progress bar, dialog, tooltip, menu,


    rich text editor, etc
    Accessibility (a11y)

    Widget Lifecycle
    constructor()
    postMixInProperties()
    buildRendering()
    postCreate()
    startup()

    Dijit Layout Widgets


    BorderContainer
    ContentPane
    LinkPane
    TabContainer
    AccordionContainer
    SplitContainer
    StackContainer

    Dojox

    What is Dojox?
    Place for extra stuf
    Stuf that isn't ready for prime time

    (i.e. dojox.grid)

    Tour of Dojox

    dojox.analytics

    Client monitoring

    dojox.charting
    dojox.cometd
    dojox.data

    dojox.form
    Additional form
    widgets

    dojox.dtl

    Tons of data stores

    Cool FX

    dojox.gfx
    Cross-browser
    vector

    Django template
    library

    dojox.embed

    dojox.fx

    Embed Flash,
    QuickTime

    graphics
    (SVG/VML)

    Tour of Dojox Contd.

    dojox.highlight

    dojox.image

    Additional transports

    dojox.layout

    Lightboxes,
    slideshow,gallery,
    magnifier

    dojox.io

    Syntax highlighting

    Dijit layout widgets

    dojox.of

    Offline support

    dojox.rpc
    dojox.secure

    Sandboxing
    dojox.storage

    Persistent
    client-side
    storage
    dojox.widgets

    Additional dijit
    widgets

    Dojo Util
    Build system
    DOH - Dojo Objective Harness

    Testing framework

    Dojo Build system


    Reduce number of files sent over the wire
    Reduce JavaScript file sizes
    Profiles
    Layers
    Build script
    Executes Java, Rhino
    Compiles modules into layer .js files
    Strips whitespace, comments, console.*(),
    etc
    Minification (i.e. "var something = 123;"
    becomes "var _0=123;"
    Inlines widget HTML templates & @import

    Build system
    Build script in /util/buildscripts
    build.sh (GNU/Linux, MacOSX, Solaris, Unix)
    build.bat (Windows)

    Pre-defined profiles in /util/buildscripts/profiles


    base
    cometd
    demos-all
    dtkapi
    fx
    layers

    Resources

    API Docs

    Online Docs

    http://api.dojotoolkit.org
    http://docs.dojocampus.org

    Blogs

    http://dojotoolkit.org/rss.xml
    http://dojocampus.org/content/feed

    Potrebbero piacerti anche