flex builder 3

http://lab.kapit.fr/display/diagrammer/Developer+Guide#DeveloperGuide-Writingdataobject

* Pendahuluan
* Menambahkan sebuah perpustakaan SVG dalam aplikasi flex
o Membuat bentuk SVG perpustakaan
+ Overview
+ Sprite definisi
+ Tindakan dan titik anchor definisi
+ Menyusun bersama-sama
o Menciptakan proyek Flex
o Penjelasan Terperinci
* Menambahkan layout untuk sebuah diagram
o Menambah perpustakaan layout
o Menambah kode
o Menjalankan tes
o Lebih layout
* Binding data ke diagram
o objek data Menulis
o Menulis objek proxy
o Menambah pemetaan
o Menampilkan data aplikasi
o Sinkronisasi seleksi
o Grafik objek modifikasi
* Sprite komposisi dalam sebuah diagram
o Membuat bentuk SVG perpustakaan
o Mengubah pemetaan
o Membuat objek programmaticaly
o Komposisi dan objek data proxy
+ Menambah properti objek data
+ Penanganan komposisi objek proxy
+ Menampilkan properti dalam datagrid
o Alter komposisi penerimaan melalui proxy

Sebuah langkah demi langkah menyelam ke dalam komponen Diagrammer Lab Kap
Pendahuluan
Dokumentasi ini sekarang bagaimana diagram mengintegrasikan fungsionalitas aplikasi AS3 Anda:
* Menambahkan sebuah perpustakaan SVG dalam aplikasi flex
* Menambahkan layout untuk sebuah diagram
* Binding data ke diagram
* Sprite komposisi dalam sebuah diagram
Kami menggunakan Flex untuk tutorial ini, tetapi karena Diagrammer adalah murni komponen AS3, itu juga dapat diintegrasikan ke dalam aplikasi AS3 Flash.
Perlu diketahui bahwa sampel yang digunakan dalam dokumentasi ini tidak dimaksudkan untuk menjadi berguna maupun dalam fase dengan standar kualitas pengembangan perangkat lunak. Demi kesederhanaan dan tetap fokus pada tujuan awal yang menunjukkan bagaimana untuk mengintegrasikan Diagrammer, kami mencoba untuk mengurangi jumlah kode artefak. Jadi kita meletakkan semua kode yang kami dapat menjadi satu file mxml, dan menciptakan kelas sesedikit mungkin, dengan menggunakan kontainer basis data generik seperti ArrayCollections. Dalam dunia nyata perangkat lunak, Anda harus menggunakan kerangka kerja MVC, membuat kelas khusus untuk menyimpan data, dan seterusnya.
Anda dapat mendownload solusi lengkap dengan semua kode dari dokumentasi ini jika Anda tidak ingin mengetik.
Menambahkan sebuah perpustakaan SVG dalam aplikasi flex
Dalam bab ini kami akan memperlihatkan cara untuk menulis aplikasi yang sangat sederhana dan dengan beberapa baris kode menambahkan fungsi diagram.
Pertama kita perlu menciptakan perpustakaan sprite yang akan digunakan dalam aplikasi.
* Kembali ke Atas
Membuat bentuk SVG perpustakaan
Tinjauan
Diagrammer menggunakan SVG untuk mendefinisikan sprite. Menggunakan SVG membantu dengan mudah mengintegrasikan ke dalam bentuk kompleks Diagrammer. Ini juga memberi kesempatan untuk mengekspor diagram dalam SVG untuk dicetak.

Diagrammer mendukung subset dari SVG 1.1. Sebagian besar fitur yang dibutuhkan untuk sprite definisi yang didukung:
* Document struktur (
* Dasar bentuk (, , , , , ).
* Dukungan penuh gambar jalan dengan: garis, elips lengkungan, kurva Bezier kubik, kurva Bezier kuadrat perintah.
* SVG fitur teks diimplementasikan secara parsial dan sesuai dengan kemampuan render teks dari flash player (, )
* Dukungan penuh dari transformasi: menerjemahkan, skala, memutar, skewX, skewY, matriks.
* Styling menggunakan CSS yang sederhana dan kompleks penyeleksi didukung.
* Gradien dan gradien menghubungkan definisi yang didukung.
* Kembali ke Atas
Definisi sprite
Untuk menentukan sprite, Diagrammer menggunakan ekstensi untuk standar SVG. Mereka didefinisikan dalam namespace http://schemas.kapit.fr/svg/2007/. Anda harus menambah tag
Setiap sprite harus didefinisikan sebagai suatu kelompok ( tag), dengan atribut sebagai berikut:
* K: spriteid mendefinisikan pengenal dari sprite. Digunakan dalam Diagrammer sebagai identifikasi unik untuk bentuk tertentu.
* K: groupid mendefinisikan kelompok sprite. Diagrammer menyediakan metode untuk mengambil semua sprite dari kelompok tertentu. Fungsi ini dapat digunakan oleh komponen (drop down menu, panel) yang memungkinkan pengguna untuk memilih sprite dari kelompok tertentu.
* Kembali ke Atas
Tindakan dan titik anchor definisi
Menggunakan css styling, kami akan menentukan bagaimana pengguna dapat berinteraksi dengan setiap sprite.
Untuk mengaktifkan input link ke bagian dari sebuah sprite, kita harus menambahkan gaya aksi-menerima: link ke bagian ini (dapat grup atau gambar dasar instruksi).
Untuk mengaktifkan output link untuk bagian dari sebuah sprite, kita harus menambahkan gaya aksi-klik: link ke bagian ini.
Untuk mengaktifkan penjelasan untuk bagian dari sebuah sprite, kita harus menambahkan aksi-menerima: penjelasan untuk bagian ini. Kami biasanya menempatkan ini dalam kelompok yang mendefinisikan sprite.
Sebagai aturan dasar, lebih baik untuk menambahkan jalur transparan khusus untuk mendefinisikan link jangkar, tapi tergantung pada sprite kita dapat menggunakan sebagian sprite.
* Kembali ke Atas
Menyusunnya
Dalam contoh ini kita akan menggunakan dua sprite perpustakaan. Kita mendefinisikan dua bentuk dasar, sebuah persegi panjang dan persegi panjang bundar. Dengan menggunakan editor gambar berbasis vektor yang mendukung SVG ekspor (seperti Inkscape), kita dapat mendefinisikan sprite yang lebih kompleks. Pastikan untuk menghapus semua non standard SVG tag dari perpustakaan sebelum menggunakannya dalam Diagrammer.
Kita akan menggunakan file SVG yang dihasilkan oleh Inkspace untuk menciptakan sebuah persegi panjang sederhana dengan gradien linier dan bulat persegi panjang:

File yang dihasilkan terlihat seperti ini:
Perpustakaan Sprite Penciptaan Dua sampel

xmlns:dc="http://purl.org/dc/elements/1.1/"

xmlns:cc="http://creativecommons.org/ns#"

xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"

xmlns:svg="http://www.w3.org/2000/svg"

xmlns="http://www.w3.org/2000/svg"

xmlns:xlink="http://www.w3.org/1999/xlink"

xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"

xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"

version="1.0"

width="1024"

height="800"

id="sgvlib"

sodipodi:version="0.32"

inkscape:version="0.46"

sodipodi:docname="export.svg"

inkscape:output_extension="org.inkscape.output.svg.inkscape">

id="metadata2457">

rdf:about="">

image/svg+xml

rdf:resource="http://purl.org/dc/dcmitype/StillImage" />

inkscape:window-height="669"

inkscape:window-width="640"

inkscape:pageshadow="2"

inkscape:pageopacity="0.0"

guidetolerance="10.0"

gridtolerance="10.0"

objecttolerance="10.0"

borderopacity="1.0"

bordercolor="#666666"

pagecolor="#ffffff"

id="base"

showgrid="false"

inkscape:zoom="0.53125"

inkscape:cx="512"

inkscape:cy="400"

inkscape:window-x="520"

inkscape:window-y="1"

inkscape:current-layer="sgvlib" />

id="defs1">

sodipodi:type="inkscape:persp3d"

inkscape:vp_x="0 : 400 : 1"

inkscape:vp_y="0 : 1000 : 0"

inkscape:vp_z="1024 : 400 : 1"

inkscape:persp3d-origin="512 : 266.66667 : 1"

id="perspective2459" />

id="linearGradient3157">

id="stop3159"

style="stop-color:#e1eaf5;stop-opacity:1"

offset="0" />

id="stop3161"

style="stop-color:#c3daea;stop-opacity:1"

offset="1" />

xlink:href="#linearGradient3157"

id="linearGradient6627"

gradientUnits="userSpaceOnUse"

gradientTransform="translate(98.840748,-67.175132)"

x1="94.95433"

y1="85.235107"

x2="94.95433"

y2="146.25534" />

id="grectangle">

id="rect3155"

style="fill:url(#linearGradient6627);fill-opacity:1;stroke:#6996cf;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"

x="137.22656"

y="18.47105"

rx="0"

ry="0"

width="98.994949"

height="60.609154" />

class="bg"

id="rect31551"

style="fill:none;fill-opacity:0;stroke:#6996cf;stroke-width:3;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0"

d="M 137.22656,18.47105 L 236.22151,18.47105 L 236.22151,79.080204 L 137.22656,79.080204 L 137.22656,18.47105 z" />

transform="translate(116.20044,0)">

style="fill:#e1eaf5;fill-opacity:0.8;stroke:#6996cf;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"

id="rect3157"

y="18.47105"

x="137.22656"

rx="10"

ry="10"

height="60.609154"

width="98.994949" />

class="bg"

id="rect31552"

style="fill:none;fill-opacity:0;stroke:#6996cf;stroke-width:3;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0"

d="M 137.22656,18.47105 L 236.22151,18.47105 L 236.22151,79.080204 L 137.22656,79.080204 L 137.22656,18.47105 z" />

Pertama-tama kita membersihkan file, menghapus tag non standard dan namespaces (Sodipodi, inscape, Purl, cc, rdf).
Non Standar tag dan namespaces Hapus Contoh

"1.0" encoding="UTF-8" standalone="no"?>

   xmlns:svg="http://www.w3.org/2000/svg"

   xmlns="http://www.w3.org/2000/svg"

   xmlns:xlink="http://www.w3.org/1999/xlink"

   version="1.0"

   width="1024"

   height="800"

   id="sgvlib">

     id="defs1">

       id="linearGradient3157">

         id="stop3159"

         style="stop-color:#e1eaf5;stop-opacity:1"

         offset="0" />

         id="stop3161"

         style="stop-color:#c3daea;stop-opacity:1"

         offset="1" />

       xlink:href="#linearGradient3157"

       id="linearGradient6627"

       gradientUnits="userSpaceOnUse"

       gradientTransform="translate(98.840748,-67.175132)"

       x1="94.95433"

       y1="85.235107"

       x2="94.95433"

       y2="146.25534" />

     id="grectangle">

       id="rect3155"

       style="fill:url(#linearGradient6627);fill-opacity:1;stroke:#6996cf;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"

       x="137.22656"

       y="18.47105"

       rx="0"

       ry="0"

       width="98.994949"

       height="60.609154" />

       class="bg"

       id="rect31551"

       style="fill:none;fill-opacity:0;stroke:#6996cf;stroke-width:3;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0"

       d="M 137.22656,18.47105 L 236.22151,18.47105 L 236.22151,79.080204 L 137.22656,79.080204 L 137.22656,18.47105 z" />

     transform="translate(116.20044,0)">

       style="fill:#e1eaf5;fill-opacity:0.8;stroke:#6996cf;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"

       id="rect3157"

       y="18.47105"

       x="137.22656"

       rx="10"

       ry="10"

       height="60.609154"

       width="98.994949" />

       class="bg"

       id="rect31552"

       style="fill:none;fill-opacity:0;stroke:#6996cf;stroke-width:3;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0"

       d="M 137.22656,18.47105 L 236.22151,18.47105 L 236.22151,79.080204 L 137.22656,79.080204 L 137.22656,18.47105 z" />

Pertama-tama kita membersihkan file, menghapus tag non standard dan namespaces (Sodipodi, inscape, Purl, cc, rdf).
Non Standar tag dan namespaces Hapus Contoh

..."defs1">

    "linearGradient3157">...

Kita mendefinisikan bg dasar dan gaya. Gaya dasar akan diterapkan ke sprite untuk mengaktifkan penjelasan. Bg gaya akan diterapkan ke bagian jangkar.
Gaya sistem penjelasan dan link-penjelasan yang kelebihan beban sesuai selera kita.
Lalu untuk setiap sprite kita memodifikasi kelompok untuk mengatur spriteid dan groupid.
Gaya dasar sampel Integrasi

...

    k:spriteid="rectangle"

    k:groupid="Basic"

    class="basic"

    id="grectangle">...

  ...

    k:spriteid="rounded-rectangle"

    k:groupid="Basic"

    id="grrectangle"

    class="basic" transform="translate(116.20044,0)">...

Sekarang perpustakaan siap. Kita dapat membukanya dengan SVG editor untuk memeriksa bahwa masih menjadikan sebagaimana dimaksud (tapi kita tidak boleh lagi ekspor untuk menghindari menambahkan tag yang tidak diinginkan).
Berikut adalah SVG (tanpa tanda Contoh Output SVG

//www.w3.org/2000/svg" xmlns:k="http://schemas.kapit.fr/svg/2007/" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" version="1.0" width="1024" height="800" id="sgvlib">

  "defs1">

    "linearGradient3157">

      "stop3159" style="stop-color:#e1eaf5;stop-opacity:1" offset="0" />

      "stop3161" style="stop-color:#c3daea;stop-opacity:1" offset="1" />

    "#linearGradient3157" id="linearGradient6627" gradientUnits="userSpaceOnUse" gradientTransform="translate(98.840748,-67.175132)" x1="94.95433" y1="85.235107" x2="94.95433" y2="146.25534" />

    k:spriteid="rectangle"

    k:groupid="Basic"

    class="basic"

    id="grectangle">

       id="rect3155"

       style="fill:url(#linearGradient6627);fill-opacity:1;stroke:#6996cf;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"

       x="137.22656"

       y="18.47105"

       rx="0"

       ry="0"

       width="98.994949"

       height="60.609154" />

       class="bg"

       id="rect31551"

       style="fill:none;fill-opacity:0;stroke:#6996cf;stroke-width:3;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0"

       d="M 137.22656,18.47105 L 236.22151,18.47105 L 236.22151,79.080204 L 137.22656,79.080204 L 137.22656,18.47105 z" />

    k:spriteid="rounded-rectangle"

    k:groupid="Basic"

    id="grrectangle"

    class="basic">

      style="fill:#e1eaf5;fill-opacity:0.8;stroke:#6996cf;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"

      id="rect3157"

      y="18.47105" x="137.22656"

      rx="10" ry="10"

      height="60.609154" width="98.994949" />

       class="bg"

       id="rect31552"

       style="fill:none;fill-opacity:0;stroke:#6996cf;stroke-width:3;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0"

       d="M 137.22656,18.47105 L 236.22151,18.47105 L 236.22151,79.080204 L 137.22656,79.080204 L 137.22656,18.47105 z" />

Sekarang mari kita menulis beberapa kode.
* Kembali ke Atas
Menciptakan proyek Flex
Peluncuran Flex Builder dan pilih New / Flex Proyek

Masukkan nama untuk Proyek Anda ( "DiagrammerTutorial" misalnya). Pilih Web Application dan tidak untuk jenis server aplikasi. Tekan Selesai untuk menerima semua opsi default

dari folder di mana Anda download itu, tarik file ke Diagrammer.swc libs flex folder dalam navigator.

Ketik kode berikut dalam file DiagrammerTutorial.mxml:
Integrasi Basic Tutorial

"1.0" encoding="utf-8"?>

"http://www.adobe.com/2006/mxml"

      xmlns:diagctl="com.kapit.diagram.controls.*"

      xmlns:diagview="com.kapit.diagram.view.*"

      layout="absolute" preinitialize="init();">

"" id="svglib">

Paste your svg library in this area...

            import com.kapit.diagram.library.SVGAssetLibrary;

            public function init():void

            {

                  var lib:SVGAssetLibrary=new SVGAssetLibrary(svglib);

            }

            public function initDiagram():void

            {

                        diagram.multipanel=false;

                        diagram.selectionenabled=true;

                        diagram.keyboardenabled=true;

                        diagram.dragenabled=true;

                        diagram.dropenabled=true;

            }

      ]]>

"100%" height="50" horizontalAlign="right">

"150" groupid="Basic"  cornerRadius="10" paddingLeft="8" paddingBottom="0" paddingTop="0" useHandCursor="true" toolTip="Drag & drop" labelPlacement="right" textAlign="left"/>

"10" top="60" bottom="10" right="10" horizontalGap="10">

"100%" height="100%" id="diagram" creationComplete="initDiagram();">

Kami mengambil bagian SVG untuk menunjukkan bahwa Anda tidak perlu menulis banyak kode. Svg perpustakaan yang dapat ditemukan pada bagian sebelumnya dokumentasi ini.
Simpan file, proyek kompilasi dan menjalankan aplikasi:

Tarik bentuk dari menu kanan atas tampilan utama. Mengklik pada sebuah bentuk menunjukkan sebuah grafis kanan atas menu yang memungkinkan Anda untuk membuat objek baru yang terkait dengan memilih satu.

Penjelasan rinci
Pada Aplikasi tag kita menambahkan referensi ke tampilan dan kontrol dari diagrammer. Kami juga mendaftarkan sebuah fungsi preinitialization.
Pada Aplikasi tag kita menambahkan referensi ke tampilan dan kontrol dari diagrammer. Kami juga mendaftarkan sebuah fungsi preinitialization.
Preinitialization Tutorial

"http://www.adobe.com/2006/mxml"

      xmlns:diagctl="com.kapit.diagram.controls.*"

      xmlns:diagview="com.kapit.diagram.view.*"

      layout="absolute" preinitialize="init();">

Kami kemudian termasuk perpustakaan svg xml tag.
Integrasi dasar sampel

"" id="svglib">

//www.w3.org/2000/svg" ...

...

...

Svg termasuk perpustakaan dalam sumber bukan suatu keharusan. Sebagai contoh, Anda dapat menggunakan URLLoader untuk memuat perpustakaan dari file svg di suatu tempat di jaringan.
Dalam init fonction kita hanya memuat perpustakaan dari xml. Hal ini harus dilakukan sebelum objek DiagramView dibuat.
Termasuk dalam XML SVG Tag sampel

import com.kapit.diagram.library.SVGAssetLibrary;

      public function init():void

      {

            var lib:SVGAssetLibrary=new SVGAssetLibrary(svglib);

      }

Tata letak aplikasi sederhana. Kami menggunakan ApplicationControlBar untuk mengadakan SVGAssetLibraryGroupButton, dan HBox untuk mengadakan DiagramView.

Integrasi SVGAssetLibraryGroupButton Tutorial

  width="100%" height="50" horizontalAlign="right">

"150" groupid="Basic"  cornerRadius="10" paddingLeft="8" paddingBottom="0" paddingTop="0" useHandCursor="true" toolTip="Drag & drop" labelPlacement="right" textAlign="left"/>

"10" top="60" bottom="10" right="10" horizontalGap="10">

"100%" height="100%" id="diagram" creationComplete="initDiagram();">

Groupid properti yang SVGAssetLibraryGroupButton diatur ke "Basic", yang merupakan nilai yang digunakan dalam k: groupid atribut untuk sprite kami di perpustakaan.

Setting Dasar Tutorial SVGAssetLibraryGroupButton

"150" groupid="Basic"

Register objek yang DiagramView sebuah fungsi initDiagram

Pendaftaran Fungsi InitDiagram Tutorial

"100%" height="100%" id="diagram" creationComplete="initDiagram();

Fungsi yang initDiagram diagram set beberapa opsi.

Setting Pilihan Fungsi initDiagram Tutorial

public function initDiagram():void

      {

                  diagram.multipanel=false;

                  diagram.selectionenabled=true;

                  diagram.keyboardenabled=true;

                  diagram.dragenabled=true;

                  diagram.dropenabled=true;

      }

Diatur ke Multipanel palsu diagram sehingga tidak mendukung tampilan multipanel. Pilihan ini memungkinkan diagram untuk dibagi dalam panel vertikal dan jalur.
SelectionEnabled diatur ke benar, sehingga dapat dipilih objek pada diagram.
KeyboardEnabled diatur ke benar, sehingga Anda dapat menggulir dengan keyboard, memasukkan teks, dll
DragEnabled memungkinkan menyeret objek dalam diagram.
DropEnabled memungkinkan menjatuhkan objek dalam diagram.

* Kembali ke Atas

Menambahkan tata letak pada diagram

Pada bagian ini kita akan menambahkan fungsi tata letak diagram kita aplikasi. Diagrammer tata letak yang kuat tempat algoritma yang secara otomatis sprite dan link dari sebuah diagram

* Kembali ke Atas

Menambahkan tata letak perpustakaan

Dari folder di mana Anda download itu, tarik libs DiagramProxies.swc ke folder dalam Flex Navigator.

Menambahkan kode

Dalam script bagian dari DiagrammerTutorial.mxml, tambahkan referensi ke proxy.

Referensi proxy Integrasi Tutorial

import com.kapit.diagram.library.SVGAssetLibrary;

      import com.kapit.diagram.proxies.KDLProxy;

      import com.kapit.diagram.layouts.utils.Constants;

      private var proxy:KDLProxy;

      public function init():void

      {

Dalam fungsi initDiagram, tambahkan inisialisasi dari proxy. Inisialisasi proxy harus dibuat setelah pembuatan diagram.

Inisialisasi proxy Tutorial

diagram.dropenabled=true;

            proxy = new KDLProxy(diagram);

            proxy.importGraph();

      }

Dalam ApplicationControlBar, tambahkan sebuah tombol yang memanggil fungsi doRadialLayout klik.

Integrasi dasar sampel

  width="100%" height="50" horizontalAlign="right">

"radialLayout" label="Radial Layout" click="doRadialLayout();"/>

"150" groupid="Basic"  cornerRadius="10" paddingLeft="8" paddingBottom="0" paddingTop="0" useHandCursor="true" toolTip="Drag & drop" labelPlacement="right" textAlign="left"/>

Tambahkan fungsi doRadialLayout pada akhir script bagian

Integrasi RadialLayout Kode

}

      public function doRadialLayout():void

      {

            proxy.radialLayout.nodesSpacing = 10;

            proxy.exportGraph(Constants.RADIAL_LAYOUT);

      }

      ]]>

Menjalankan tes

Membangun aplikasi dan meluncurkannya.
Buat sprite terhubung.

Klik pada tombol Tata Letak Radial dan membiarkan keajaiban terjadi ...

More layout

Sekarang Anda mendukung aplikasi tata letak radial. The Diagrammer memiliki banyak built-in layout seperti hierarkis, radial, balon, layout organik.
Mari kita menambahkan animasi tata letak organik untuk aplikasi Anda.
Tambahkan tombol baru pada panel kontrol aplikasi yang memanggil fungsi doAnimatedLayout saat diklik.

Layout animasi Kode Panggil

  width="100%" height="50" horizontalAlign="right">

"animatedLayout" label="Animated Layout" click="doAnimatedLayout();"/>

"radialLayout" label="Radial Layout" click="doRadialLayout();"/>

Tambahkan fungsi doAnimatedLayout pada akhir script bagian

Layout animasi Integrasi Kode

public function doAnimatedLayout():void

      {

            proxy.exportGraph(Constants.ANIMATED_FORCEDIRECTED_LAYOUT);

      }

      ]]>

Kompilasi dan meluncurkan aplikasi. Buat objek terkait, klik tombol Layout animasi, dan drag satu obyek. Anda akan melihat semua objek-objek lain berikut objek dalam animasi yang bagus.

Mengikat data ke sebuah diagram

Pada bagian ini kita akan menambahkan data antara diagram mengikat melihat dan data aplikasi. Hal ini memungkinkan para pengembang untuk mengajukan pandangan alternatif link sprite dan diagram. Menggunakan flex binding perubahan apapun milik sprite dan link dalam diagram secara otomatis dilaporkan dalam pandangan-pandangan alternatif.

Data yang mengikat dari obyek diagram data aplikasi menggunakan proxy. Untuk mengaktifkan mengikat, seorang pengembang harus membuat kelas sprite mengimplementasikan proxy ISpriteProxy antarmuka dan link proxy ILinkProxy pelaksanaan kelas antarmuka. Lalu ia harus membuat file konfigurasi yang menghubungkan spriteid, link dan proxy. Lalu ia harus membuat DiagramModel dengan file konfigurasi dan mendefinisikannya sebagai model DiagramView.

Ketika plumbery ini dilakukan, setiap sebuah sprite atau link dibuat, dihapus atau diubah, metode yang sesuai yang sesuai proxy anda bernama. Ini adalah tanggung jawab pengembang untuk menerapkan manipulasi data aplikasi sehingga data aplikasi mencerminkan negara diagram.

Dalam tutorial ini kita akan menggunakan hanya satu proxy untuk sprite dan satu untuk link. Aplikasi dunia nyata, Anda dapat memiliki proxy khusus untuk beberapa sprite, atau memiliki beberapa sprite berbagi proxy yang sama.

* Kembali ke Atas

Penulisan data objek

Dari Flex Navigator src folder, pilih New / ActionScript Kelas. Nama itu MyObject.

Tambahkan kode berikut:

Obyek data Definisi

package

{

      public class MyObject

      {

            [Bindable]

            public var type:String;

            [Bindable]

            public var spriteid:String;

            [Bindable]

            public var did:String;

            [Bindable]

            public var name:String;

            [Bindable]

            public var uid:String;

            public function MyObject()

            {

            }

      }

Kita mendefinisikan semua atribut sebagai bindable untuk menampilkan mereka dalam datagrid tanpa kode.

* Kembali ke Atas

Menulis objek proxy

Dari Flex Navigator src folder, pilih New / ActionScript Kelas. Nama itu MyObjectProxy, dan menambahkan ISpriteProxy sebagai antarmuka. Dengan cara ini semua metode anda akan otomatis dibuat oleh Flex pembangun untuk Anda.

Tambahkan kode berikut:

Obyek Proxy Integrasi Tutorial

package

{

      import com.kapit.diagram.IDiagramElement;

      import com.kapit.diagram.layers.DiagramLane;

      import com.kapit.diagram.model.ISpriteProxy;

      import com.kapit.diagram.view.DiagramSprite;

      import com.kapit.diagram.view.DiagramView;

      import mx.collections.ArrayCollection;

      import mx.utils.UIDUtil;

      public class MyObjectProxy implements ISpriteProxy

      {

            public static var _objects:ArrayCollection = null;

            protected var _view:DiagramView;

            public function MyObjectProxy(view:DiagramView)

            {

                  _view = view;

            }

            protected function getElementIndex(el:IDiagramElement):int

            {

                  if (el.dataobjectid && _objects)

                  {

                        for(var i:int=0; i < _objects.length; i++)

                        {

                               var obj:Object = _objects.getItemAt(i);

                               if (obj.uid == el.dataobjectid)

                               {

                                     return i;

                               }

                        }

                  }

                  return -1;

            }

            public function createDataObject(el:IDiagramElement):String

            {

                  var type:String = el.getTagName();

                  var spriteid:String = DiagramSprite(el).spriteid;

                  var name:String = el.did;

                  var uid:String = UIDUtil.createUID();

                  var obj:MyObject = new MyObject();

                  obj.type = type;

                  obj.spriteid = spriteid;

                  obj.did = el.did;

                  obj.uid = uid;

                  obj.name = "";

                  if (_objects)

                        _objects.addItem(obj);

                  return uid;

            }

            public function removeDataObject(el:IDiagramElement):void

            {

                  var index:int = getElementIndex(el);

                  if (index != -1)

                        _objects.removeItemAt(index);

            }

            public function allowLinkAction(el:IDiagramElement):Boolean

            {

                        return true;

            }

            public function propertyModified(el:IDiagramElement, propname:String, propvalue:Object, shapeid:String):void

            {

                  var index:int = getElementIndex(el);

                  var obj:MyObject = null;

                  if (index != -1)

                  {

                        obj = _objects.getItemAt(index) as MyObject;

                  }

                  if ("text" == propname)

                  {

                        if (obj)

                        {

                               obj.name=String(propvalue);

                        }

                  }

            }

            public function preAcceptLinkSource(spriteid:String, sourcespriteid:String, el:IDiagramElement):Boolean

            {

                  return true;

            }

            public function preAcceptLinkTarget(spriteid:String, targetspriteid:String, el:IDiagramElement):Boolean

            {

                  return true;

            }

            public function dataObjectPropertyModified(uid:String, propname:String, propvalue:Object):void

            {

            }

            public function acceptLinkTarget(el:IDiagramElement, target:IDiagramElement):Boolean

            {

                  return true;

            }

            public function dataObjectRemoved(uid:String):void

            {

            }

            public function dataObjectLoaded(el:IDiagramElement):void

            {

            }

            public function acceptLinkSource(el:IDiagramElement, source:IDiagramElement):Boolean

            {

                  return true;

            }

            public function laneChanged(el:IDiagramElement, lane:DiagramLane):void

            {

            }

            public function acceptPropertyModification(el:IDiagramElement, propname:String, propvalue:Object, shapeid:String):Boolean

            {

                  return true;

            }

            public function acceptRemoveObject(el:IDiagramElement):Boolean

            {

                  return true;

            }

      }

}

Dari Flex Navigator src folder, pilih New / ActionScript Kelas. Nama itu MyLinkProxy, dan menambahkan ILinkProxy sebagai antarmuka. Dengan cara ini semua metoda yang akan otomatis dibuat oleh Flex pembangun untuk Anda.

Add the following code:

Link Proxy Integration Tutorial

package

{

import com.kapit.diagram.IDiagramElement;

import com.kapit.diagram.model.ILinkProxy;

import com.kapit.diagram.view.DiagramLink;

import com.kapit.diagram.view.DiagramView;

import mx.collections.ArrayCollection;

import mx.utils.UIDUtil;

public class MyLinkProxy implements ILinkProxy

{

public static var _links:ArrayCollection = null;

protected var _view:DiagramView;

public function MyLinkProxy(view:DiagramView)

{

_view = view;

}

public function createDataObject(el:IDiagramElement):String

{

var type:String = el.getTagName();

var sourceid:String = DiagramLink(el).sourceobject.dataobjectid;

var targetid:String = DiagramLink(el).targetobject.dataobjectid;

var uid:String = UIDUtil.createUID();

var obj:Object = new Object();

obj.start = sourceid;

obj.end = targetid;

obj.uid = uid;

if (_links)

_links.addItem(obj);

return uid;

}

public function scopeChanged(link:DiagramLink, oldscope:String):void

{

}

public function removeDataObject(el:IDiagramElement):void

{

if (el.dataobjectid && _links)

{

for(var i:int=0; i < _links.length; i++)

if (_links.getItemAt(i).uid == el.dataobjectid)

{

_links.removeItemAt(i);

break;

}

}

}

public function propertyModified(el:IDiagramElement, propname:String, propvalue:Object, shapeid:String):void

{

}

public function dataObjectPropertyModified(uid:String, propname:String, propvalue:Object):void

{

}

public function dataObjectRemoved(uid:String):void

{

}

public function dataObjectLoaded(el:IDiagramElement):void

{

}

public function acceptPropertyModification(el:IDiagramElement, propname:String, propvalue:Object, shapeid:String):Boolean

{

return true;

}

public function acceptRemoveObject(el:IDiagramElement):Boolean

{

return true;

}

}

}

• Back to Top

Adding mappings

In the DiagrammerTutorial.mxml file, add a xml document holdings mappings.

Mapping Adding Code

Tambahkan impor dan definisi data aplikasi. Dalam tutorial ini kita akan menggunakan ArrayCollection sebagai contoh, karena kita tidak ingin melipatgandakan definisi kelas.

Definisi impor dan Penerapan Kode

private var proxy:KDLProxy;

      import com.kapit.diagram.model.DiagramModel;

      import MyObjectProxy;

      import MyLinkProxy;

      import mx.collections.ArrayCollection;

      [Bindable]

      public var myObjects:ArrayCollection = new ArrayCollection();

      [Bindable]

      public var myLinks:ArrayCollection = new ArrayCollection();

      public function init():void

Dalam fungsi initDiagram, mengatur proxy ArrayCollection dan menetapkan model diagram.

Pengaturan Proxy dan ArrayCollection Contoh Model Diagram

diagram.dropenabled=true;

MyObjectProxy._objects = myObjects;

MyLinkProxy._links = myLinks;

var model:DiagramModel=new DiagramModel(diagramMappings);

diagram.model=model;

proxy = new KDLProxy(diagram);

Data binding sekarang diaktifkan. Anda dapat menguji dengan debug aplikasi Anda dan pengaturan breakpoint di MyObjectProxy dan metode MyLinkProxy. Anda akan melihat bahwa objek proxy dibuat ketika objek diagram yang pertama diciptakan, dan bahwa fungsi createDataObject disebut setiap kali sebuah objek diciptakan.

Kode Anda menulis menambahkan Obyek di myOBjects dan MyLinks ArrayCollections dan menjaga mereka tetap disinkronisasi dengan diagram sprite dan link.

Sekarang kita akan menambahkan beberapa kode untuk menggunakan ArrayCollections ini.

* Kembali ke Atas

Menampilkan data aplikasi

Kami mengubah layout aplikasi dengan menambahkan dua DataGrids. Satu akan menampilkan sprite dan link lainnya.

Integrasi DataGrids Kode

"10" top="50" bottom="10" right="10" horizontalGap="10">

"50%" height="100%" layout="absolute" title="Diagram" id="diagramPanel">

"diagram" creationComplete="initDiagram();" >

"50%" height="100%">

      "objectPanel" width="100%" height="50%"  title="Objects">

            "objectsGrid" dataProvider="{myObjects}" width="100%" height="100%" >

                        "Type" dataField="spriteid" />

                        "Sprite" dataField="did" />

                        "ID" dataField="uid" />

                        "Name" dataField="name" />

      "linksPanel" width="100%" height="50%"  title="Links">

            "linksGrid" dataProvider="{myLinks}" width="100%" height="100%" >

                        "Start" dataField="start"/>

                        "End" dataField="end"/>

Membangun dan menjalankan aplikasi. Tambahkan sprite dan link ke diagram, Anda akan melihat mereka muncul pada kotak yang sesuai. Tambahkan penjelasan ke obyek dan melihat mereka tercermin dalam nama kolom.

Sekarang kita memiliki dua DataGrids terhubung ke Diagram. Tetapi bila Anda memilih sprite atau link, tidak ada yang dipilih pada bentuk grid. Dan ketika Anda memilih baris dalam grid tidak bisa dipilih pada Diagram. Mari kita perbaiki ini.

* Kembali ke Atas

Sinkronisasi seleksi

Pertama menambahkan beberapa impor

Impor Dasar Kode

import mx.collections.ArrayCollection;

import com.kapit.diagram.DiagramEvent;

import com.kapit.diagram.view.DiagramObject;

import mx.events.ListEvent;

[Bindable]

public var myObjects:ArrayCollection = new ArrayCollection();

Daftar ke pemilihan diubah dari diagram dalam fungsi initDiagram

Seleksi Berubah Kode Pendaftaran

diagram.model=model;

                        diagram.addEventListener(DiagramEvent.SELECTION_CHANGED,handleDiagramSelectionChanged);

proxy = new KDLProxy(diagram);

Tambahkan fungsi untuk menangani seleksi pada diagram dan pilih sesuai baris pada grid yang benar.

Diagram Pemilihan dan datagrid Row Correspondency Kode

private function handleDiagramSelectionChanged(e:Event):void

{

      var arr:Array=diagram.getSelectedObjects();

      var uid:String=(arr&&arr.length==1)?DiagramObject(arr[0]).dataobjectid:null;

      if(uid)

      {

            var found:Boolean=false;

            for(var i:int=0;i

                  {

                  if (myObjects.getItemAt(i).uid == uid)

                  {

                        objectsGrid.selectedIndex = i;

                        found = true;

                        break;

                  }

            }

            if (!found)

            {

                  for(i=0;i< myLinks.length;i++)

                  {

                        if (myLinks.getItemAt(i).uid == uid)

                        {

                               linksGrid.selectedIndex = i;

                               found = true;

                               break;

                        }

                  }

            }

      }

}

Sekarang kita punya satu pilihan cara sinkronisasi: ketika sebuah objek yang dipilih pada diagram baris yang sesuai agar terpilih pada grid. Kita perlu menambahkan cara lain.

Daftar fungsi pada kegiatan untuk itemClick dua datagrid:

Event Integrasi item Klik Kode

"objectsGrid" dataProvider="{myObjects}" itemClick="handleObjectSelected(event);" width="100%" height="100%" >

...

"linksGrid" dataProvider="{myLinks}" itemClick="handleLinkSelected(event);" width="100%" height="100%" >

Tambahkan fungsi pada skrip bagian

Item Klik Handler Keterangan Kode

private function handleObjectSelected(event:ListEvent):void

{

        var uid:String = myObjects.getItemAt(event.rowIndex).uid;

        var dob:DiagramObject = DiagramObject(diagram.getElementByDataObjectId(uid));

        diagram.deselectAll();

        diagram.selectObject(dob);

}

private function handleLinkSelected(event:ListEvent):void

{

        var uid:String = myLinks.getItemAt(event.rowIndex).uid;

        var dob:DiagramObject = DiagramObject(diagram.getElementByDataObjectId(uid));

        diagram.deselectAll();

        diagram.selectObject(dob);

}

Dan hanya itu. Mengkompilasi dan menjalankan aplikasi, membuat sprite dan link, klik pada objek diagram dan grid baris dan melihat seperti semua disimpan di sinkron.

Sekarang perbaikan terakhir dapat kita tambahkan adalah kemampuan untuk mengubah properti obyek grafik dari input pengguna di luar tampilan diagram.

* Kembali ke Atas

Grafik objek modifikasi

Pertama, mari kita membuat nama field dapat diedit.

Mengaktifkan Nama Field Edition Kode

"objectsGrid" dataProvider="{myObjects}" itemEditEnd="handleEditEnd(event);" itemClick="handleObjectSelected(event);" width="100%" height="100%" editable="true" >

                        "Type" dataField="spriteid" editable="false"/>

                        "Sprite" dataField="did" editable="false"/>

                        "ID" dataField="uid" editable="false"/>

                        "Name" dataField="name" editable="true"/>

Add some imports

Basic Import Code

import mx.events.ListEvent;

import mx.controls.TextInput;

import mx.events.DataGridEvent;

[Bindable]

Kemudian ketik fungsi handleEditEnd

Edit Akhir Handler Integrasi Kode

private function handleEditEnd(event:DataGridEvent):void

        {

            var edit:TextInput = TextInput(event.currentTarget.itemEditorInstance);

            var name:String = edit.text;

            var uid:String = myObjects.getItemAt(event.rowIndex).uid;

            var dob:DiagramObject = DiagramObject(diagram.getElementByDataObjectId(uid));

            if (dob.annotation)

             dob.annotation.text = name;

            else

             diagram.createAnnotation(dob, name);

        }

Dalam fungsi handleEditEnd kita mengambil nilai baru dan mengaturnya sebagai suatu penjelasan untuk sprite yang sesuai di diagrammer. Jika tidak sprite sudah memiliki penjelasan kami menciptakannya.

Sekarang Anda memiliki directionnal bi-data binding antara diagram dan data aplikasi.

* Kembali ke Atas

Sprite komposisi dalam sebuah diagram

Pada bagian ini kita akan menambahkan komposisi sprite kemampuan untuk aplikasi kita.
Sprite komposisi adalah visual mecanism menggabungkan beberapa sprite ke dalam satu, seperti dalam kelompok. Tetapi ada perbedaan antara pengelompokan dan komposisi:

* Salah satu sprite (master atau komposit) mengandung semua unsur komposisi. Dia dapat memindahkan dan mengubah ukuran, dan komposisi unsur-unsur dipindahkan dan diubah ukurannya sesuai.
* Tidak semua sprite dapat menjadi komposit atau komposisi elemen. Ini didefinisikan oleh gaya SVG "tindakan-menerima: komposisi" untuk elemen komposisi dan "tindakan-menerima: komposit" untuk komposit (atau master elemen).
* Sebuah komposit telah dilindungi undang-undang daerah (svg elemen) di mana elemen komposisi dapat diletakkan. Hanya ada satu elemen komposisi per wilayah. Jadi ada jumlah maksimum elemen dalam suatu komposisi, dan maksimum tergantung pada definisi sprite komposit.
* Komposisi dipicu ketika pengguna menyeret sprite (komposisi elemen) ke sprite lain (komposit).
* Komposisi dianggap sebagai perubahan dalam model data, sehingga komposisi penerimaan diberlakukan melalui metode dari sprite proxy, dan terjadinya komposisi mengarah pada metode proxy sprite panggilan.

* Kembali ke Atas

Membuat bentuk SVG perpustakaan

Memulai untuk hasil bagian sebelumnya, kita mengubah SVG komposisi perpustakaan untuk menambah kemampuan.

Memodifikasi konten tag XML sesuai svglibrary:

Komposisi Kemampuan Add On The XML SVG Perpustakaan Tag

//www.w3.org/2000/svg" xmlns:k="http://schemas.kapit.fr/svg/2007/" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" version="1.0" width="1024" height="800" id="sgvlib">

  "defs1">

    "linearGradient3157">

      "stop3159" style="stop-color:#e1eaf5;stop-opacity:1" offset="0" />

      "stop3161" style="stop-color:#c3daea;stop-opacity:1" offset="1" />

    "#linearGradient3157" id="linearGradient6627" gradientUnits="userSpaceOnUse" gradientTransform="translate(98.840748,-67.175132)" x1="94.95433" y1="85.235107" x2="94.95433" y2="146.25534" />

    k:spriteid="rectangle"

    k:groupid="Basic"

    class="composition"

    id="grectangle">

       id="rect3155"

       style="fill:url(#linearGradient6627);fill-opacity:1;stroke:#6996cf;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"

       x="137.22656"

       y="18.47105"

       rx="0"

       ry="0"

       width="98.994949"

       height="60.609154" />

       class="bg"

       id="rect31551"

       style="fill:none;fill-opacity:0;stroke:#6996cf;stroke-width:3;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0"

       d="M 137.22656,18.47105 L 236.22151,18.47105 L 236.22151,79.080204 L 137.22656,79.080204 L 137.22656,18.47105 z" />

    k:spriteid="rectangle-composed"

    k:groupid="Composed"

    class="composition"

    id="grectangle">

       id="rect3155"

       style="fill:url(#linearGradient6627);fill-opacity:1;stroke:#3060DE;stroke-width:5;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"

       x="137.22656"

       y="18.47105"

       rx="0"

       ry="0"

       width="98.994949"

       height="60.609154" />

       id="rect3156"

       style="fill:none;stroke:#3060DE;stroke-width:5;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"

       x="147.22656"

       y="28.47105"

       rx="0"

       ry="0"

       width="78.994949"

       height="40.609154" />

       class="bg"

       id="rect31551"

       style="fill:none;fill-opacity:0;stroke:#6996cf;stroke-width:3;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0"

       d="M 137.22656,18.47105 L 236.22151,18.47105 L 236.22151,79.080204 L 137.22656,79.080204 L 137.22656,18.47105 z" />

    k:spriteid="rounded-rectangle"

    k:groupid="Basic"

    id="grrectangle"

    class="basic" transform="translate(116.20044,0)">

      style="fill:#e1eaf5;fill-opacity:0.8;stroke:#6996cf;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"

      id="rect3157"

      y="18.47105" x="137.22656"

      rx="10" ry="10"

      height="60.609154" width="98.994949" />

       class="bg"

       id="rect31552"

       style="fill:none;fill-opacity:0;stroke:#6996cf;stroke-width:3;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0"

       d="M 137.22656,18.47105 L 236.22151,18.47105 L 236.22151,79.080204 L 137.22656,79.080204 L 137.22656,18.47105 z" />

      class="composite"

      style="fill:#6996cf;fill-opacity:0.1;stroke:#FFFFFF;stroke-width:1;stroke-opacity:0.3"

      id="compo1"

          d="M 180,18 L 210,18 L 210,38 L 180,38 L 180,18 z" />

      class="composite"

      style="fill:#6996cf;fill-opacity:0.1;stroke:#FFFFFF;stroke-width:1;stroke-opacity:0.3"

      id="compo2"

          d="M 180,59 L 210,59 L 210,79 L 180,79 L 180,59 z" />

Mengubah pemetaan

Ganti diagramMappings tag dengan ini:

Pemetaan diagram Modifikasi Kode

"" id="diagramMappings">

            "rectangle" width="40" height="40" proxyclass="fr.kapit.tutorial.MyObjectProxy" />

            "rectangle-composed" width="40" height="40" proxyclass="fr.kapit.tutorial.MyObjectProxy" />

            "rounded-rectangle"  width="40" height="40" proxyclass="fr.kapit.tutorial.MyObjectProxy" />

            "comment" proxyclass="fr.kapit.tutorial.MyObjectProxy" />

            "fr.kapit.tutorial.MyLinkProxy" />

            "fr.kapit.tutorial.MyLinkProxy" />

            "fr.kapit.tutorial.MyLinkProxy" />

Kami hanya mengubah definisi sprite proxy untuk mencocokkan perpustakaan baru kami.

* Kembali ke Atas

Membuat obyek programmaticaly

Kita akan menciptakan sebuah aplikasi komposit di awal.

Mengubah fungsi initDiagram:

Penciptaan komposit Kode

public function initDiagram():void

            {

...

                        proxy = new KDLProxy(diagram);

                        proxy.importGraph();

                        var  s2:DiagramSprite = diagram.createSprite("rounded-rectangle", null, true, false);

                        var  s1:DiagramSprite = diagram.createSprite("rectangle", null, true, false);

                        diagram.createComposition(s2, s1, false);

            }

Kami terlebih dulu membuat sprite bulat-persegi panjang, yang dapat menjadi komposit, maka segi empat, yang dapat menjadi elemen komposisi.

Lalu kita menciptakan komposisi dengan bulat-persegi panjang sebagai master, dan persegi panjang sebagai elemen.

Pada titik ini jika Anda menjalankan aplikasi Anda akan melihat komposisi sprite. Anda dapat memindahkan itu, mengubah ukurannya dan Anda akan melihat bagaimana komposisi unsur dipindahkan dan diubah ukurannya.

* Kembali ke Atas

Komposisi dan objek data proxy

Kita akan menciptakan sebuah aplikasi komposit di awal.

* Kembali ke Atas

Menambahkan data properti objek

Edit file untuk menambahkan MyObject.as properti:

Obyek data Properties Tambah

[Bindable]

            public var uid:String;

            [Bindable]

            public var compositions:Number;

            [Bindable]

            public var master:String;

            public function MyObject()

Kami akan menghitung jumlah elemen dalam suatu komposisi (komposisi properti), dan menyimpan master (komposit) dari suatu komposisi elemen.

* Kembali ke Atas

Penanganan komposisi objek proxy

MyObjectProxy.as memodifikasi file untuk menangani pesan komposisi.

Komposisi Handler pada proxy Objek Kode

protected function getElementSpriteId(el:IDiagramElement):String

{

      if (el is DiagramSprite)

      {

            var s:DiagramSprite = el as DiagramSprite;

            return s.spriteid;

      }

      return null;

}

public function createDataObject(el:IDiagramElement):String

{

      var type:String = el.getTagName();

      var spriteid:String = DiagramSprite(el).spriteid;

      var name:String = el.did;

      var uid:String = UIDUtil.createUID();

      _objects.length

      var obj:MyObject = new MyObject();

      obj.type = type;

      obj.spriteid = spriteid;

      obj.did = el.did;

      obj.uid = uid;

      obj.name = "";

      obj.compositions = 0;

      obj.master = "";

      if (_objects)

            _objects.addItem(obj);

      return uid;

}

public function removeDataObject(el:IDiagramElement):void

{

      var index:int = getElementIndex(el);

      if (index != -1)

            _objects.removeItemAt(index);

}

public function allowLinkAction(el:IDiagramElement):Boolean

{

      return true;

}

public function propertyModified(el:IDiagramElement, propname:String, propvalue:Object, shapeid:String):void

{

      var index:int = getElementIndex(el);

      var obj:MyObject = null;

      if (index != -1)

      {

            obj = _objects.getItemAt(index) as MyObject;

      }

      var s:DiagramSprite = null;

      if (el is DiagramSprite)

            s = el as DiagramSprite;

      if ("text" == propname)

      {

            if (obj)

            {

                  obj.name=String(propvalue);

            }

      }

      if ("compositionmasterleave" == propname)

      {

            if (s && "rectangle-composed" == shapeid)

            {

                  s.spriteid = "rectangle";

                  s.dragenabled = true;

                  s.selectable = true;

                  if (obj)

                  {

                        obj.spriteid = s.spriteid;

                        obj.master="";

                  }

            }

      }

      if ("compositionmaster" == propname)

      {

            if (s && "rectangle" == shapeid)

            {

                  s.spriteid = "rectangle-composed";

                  s.dragenabled = true;

                  s.selectable = true;

                  if (obj)

                  {

                        obj.master=DiagramSprite(propvalue).did;

                        obj.spriteid = s.spriteid;

                  }

            }

      }

      if ("compositionelement" == propname)

      {

            if (obj)

            {

                  obj.compositions=obj.compositions + 1;

            }

      }

      if ("compositionelementremove" == propname)

      {

            if (obj)

            {

                  obj.compositions=obj.compositions - 1;

            }

      }

}

Properti compositionmaster berubah ketika sebuah sprite memasukkan komposisi, dan compositionmasterleave ketika ia meninggalkan sebuah komposisi.

Dalam aplikasi kami ketika sebuah sprite masukkan compositon kami:

* Buatlah dipilih dan bergerak.
* Ganti dengan sprite.
Kami ia meninggalkan komposisi, sebuah elemen sprite diatur kembali ke sprite aslinya.
Properti compositionelement berubah ketika menerima gabungan unsur komposisi baru, dan unsur compositionelementremove ketika daun (atau dihapus).

Dalam aplikasi kita kita meningkatkan dan mengurangi jumlah elemen komposit ketika suatu unsur ditambahkan atau dihapus.

* Kembali ke Atas

Menampilkan properti pada datagrid

Mengubah objek datagrid untuk menampilkan komposisi dan menguasai sifat

Komposisi & Master Properties Tampilan Integrasi Kode

"objectsGrid" dataProvider="{myObjects}" itemEditEnd="handleEditEnd(event);" itemClick="handleObjectSelected(event);" width="100%" height="100%" editable="true" >

                        "Type" dataField="spriteid" editable="false"/>

                        "Sprite" dataField="did" editable="false"/>

                        "ID" dataField="uid" editable="false"/>

                        "Name" dataField="name" editable="true"/>

                        "Elements" dataField="compositions" editable="false"/>

                        "Master" dataField="master" editable="false"/>

Jalankan aplikasi dan lihat sebagai elemen-elemen dan menguasai bidang akan diperbarui bila Anda memindahkan elemen dari komposit ke yang lain, menghapusnya, menambahkan mereka ...

* Kembali ke Atas

Mengubah komposisi penerimaan melalui proxy

Ubah kelas untuk menangani MyObjectProxy menerima pesan:

Penerimaan pesan Handler Proxies Melalui Integrasi Kode

public function acceptPropertyModification(el:IDiagramElement,propname:String,propvalue:Object,shapeid:String):Boolean

{

      var index:int = getElementIndex(el);

      var obj:MyObject = null;

      if (index != -1)

      {

            obj = _objects.getItemAt(index) as MyObject;

      }

      if ("text" == propname)

      {

            return true;

      }

      if ("compositionmasterleave" == propname)

      {

            return true;

      }

      if ("compositionmaster" == propname)

      {

            return ((el as DiagramSprite).masterobject == null || (el as DiagramSprite).masterobject == propvalue);

      }

      if ("compositionelement" == propname)

      {

            // No more than one element in a composition

            if (obj)

            {

                  return ((obj.compositions<1) || (obj.compositions == 1 && (propvalue as DiagramSprite).masterobject == el));

            }

      }

      if ("compositionelementremove" == propname)

      {

            return true;

      }

      return true;

}

public function acceptRemoveObject(el:IDiagramElement):Boolean

{

      var s:DiagramSprite = el as DiagramSprite;

      if (s && s.masterobject)

            return false;

      return true;

}

Kembali palsu dalam fungsi ini melarang pengguna untuk melakukan tindakan yang dicoba.
Compositionmaster Dalam kasus ini, kita menerima bahwa komposisi sprite masukkan hanya jika itu tidak dalam komposisi sebelum atau dengan guru yang sama (dalam kasus unsur ini bergerak di bidang lain di dalam komposit).
Compositionelement Dalam kasus ini, kita menerima bahwa komposisi sprite masukkan hanya jika komposisi kosong atau dengan guru yang sama (dalam kasus unsur ini bergerak di bidang lain di dalam komposit). Dengan cara ini kami membatasi jumlah elemen dari komposisi ke 1, meskipun kita dapat memiliki beberapa daerah dalam komposit.
In the acceptRemoveObject, we don't accept to remve a sprite inside a composition (with a non null masterobject).
Seperti yang anda lihat, dengan fungsi penerimaan Anda memiliki fleksibilitas besar untuk menegakkan aturan bisnis Anda.