 Ik ga over Apache Wicked, een component-orienteerde webfamilie. Dit is de agenda. Ik ga het een beetje uitleggen met Apache Wicked. En ik ga over onze volgende release, 1.5, en dan ga ik vragen. Eerst, over mij, ik ben Martijn Dasshorst. Ik werk voor Tobicus, een dutch-based company building webapplications. Ik ben de chair voor Apache Wicked, dat betekent dat ik me meestal opgezet ben. De mensen willen me zitten, zoals de boord van Apache en mijn vrouw en collega's. Ik committe soms op het Wicked project. Ik ben een Apache member en ik heb een boek over het framework dat ik ga praten. De introductie. Wat is Apache Wicked? Het is een component-orienteerde webfamilie met java en hcml. Het is een openseur, want ik zou hier niet staan. Apache license, dus iedereen kan het doen met wat ze willen. Het was gecreëerd in 2004, het is een java webfamilie. Het is component-orienteerde en je kunt het op de url vinden. Dus, wie is Wicked gebruikt? Iedereen hier is Wicked gebruikt. Er zijn niet veel, dus oké. Er zijn andere mensen ook Wicked gebruikt. AdSkill, ik heb het nooit gezegd, het is een German ad company. Het is in de Alexa Top 2000 worldwide websites. Ik heb het nooit gezegd, maar het werkt wel. De andere websites, Mobile, Walmart, de grootste Amerikaanse retailer in de wereld. Een dating-website, iets voor songtacks, een portfolio om je foto te brengen. Als je een vrouw en over 40 jaar oud bent, er is een mooie vorm voor je met veel interessante articles. Voor de Dutch mensen hier, eropuit.nl, het is een tripselectionwebsite. Het is Wicked-paste. De andere Dutchies, Marco Borsado, een heel bekend Dutch artiest. De website is ook gebouwd met Wicked. Als je naar Mexico wilt gaan, is dit website gebouwd met Wicked. Als je meer vorm moet gaan met een mooie style, kan je ze met Wicked buyen. In de laatste uur kun je een online game spelen met Wicked. Je kan winen wanneer je speelt. Als je windows runt, kan je iemand windows runen? Wow! 1. Je kan entre-fires producten met Wicked buyen. En als je wilt gaan naar Las Vegas, kan je je trip hier boeken. Maar ik kan je niet zeggen, want alles wat er in Vegas gebeurt, staat in Vegas. Een paar kwaliteiten van onze users, mobile.warmel.com, supporten drie categorieën van mobiele devices met dezelfde Java code. En alleen de HTML is heel anders. Je kunt imagineren dat Android en iOS mobiele telefoons in hetzelfde ballpark zijn. Windows Mobile 6 is echt een drag met een passende HTML, dus ze moeten een verschillende HTML serveen voor dat. De jongens van Vegas.com ontstaan ook Mexico.com vorig jaar. En ze ontstaan gewoon hun existe applicatie. En ze ontstaan dat een hele nieuwe website voor boeken, vacaties en holidays in Mexico. Ze ontstaan dat het ontstaan van hun code was geweldig. Dus, als ik zei dat het wikker was, het is een componentorie en een webfamilie en het gebruikt gewoon HTML. Dus laten we dat een beetje ontdekken. Laten we deze sign-up vorm creëren. Ik heb deze example uit RailsCast gekregen. Is iemand van RailsCast bekend? Het is een heel mooie online website waar iemand schrijft video's, screencasts van een kleine Rails component. Uselijk vijf, tien minuten tijdens. Het is echt leuk om een feel van Ruby in Rails te krijgen. Dus als je het in HTML 5 wilt maken, het vorm zou iets zoals dit zien. Je hebt een header, een vorm, erin is een plek om feedbackmessage voor jouw users, een e-mail field, een password field en een confirmation box. En het is beter om het te submitten. Met Ruby in Rails, het zou iets zoals dit zien. Je hebt een speciaal tag voor Ruby code waar je voor een user creëert een vorm en als er er errors zijn, displayen we dit enzovoort. Dit ziet er veel uit als JSPs. Is iemand JSPs gebruikt? Dat is voorzichtig, mensen. Dus geniet van het? Dus als je terug naar het HTML, als je dit op een browser opent, van het file-system, het ziet er niet uit als de sign-up vorm. Het is volledig gemakkelijk, maar je ziet de text-sign-up. En dan zie je niets, het is helemaal blank. Want het browser weet niets van deze Ruby-stapens. Zoals met JSPs, alles dat is belangrijk voor Java, is het niet in het browser. Dus als je deze preview in je browser opent, het ziet er exact zoals dat. Nu, met Wicked, we gebruiken dat markup. We augmenten de markup met een paar speciaal tags waar we Wicked vertellen om iets te doen. En als je dit op het browser opent, ziet het nog steeds hetzelfde vorm. Dus Wicked gebruikt dit idiom om aan de tags te krijgen, de markup die moet bepareerd worden. En soms, als je hebt, er zijn een paar, er zijn twee manieren om de markup te kijken om webapplicaties te bouwen. Je hebt imperative markup, waar je code en markup intersekt. En het is gebruikt veel door Ruby en Rails, JSP, Play Framework, velocity templates. En het is geweldig voor webdevelopers. Ik hoor altijd, als mensen op Wicked complainen, je kan niet iets doen in de markup, wat ik genoemd ben. Dus er zijn er zeker veel mensen die het leuk werken, zoals dit. En het geeft snel resultaten. Als je het runnet, kun je heel snel werken. Je hebt een website aan het runnen. Ik vind het een probleem dat code en markup niet beperkt zijn. Dus conversely hebben we declaratief markup. En dit is gebruikt door Wicked, pijniert door Tapestry en Facelits, JSF Framework, gebruikt dit ook. Maar dit is geweldig voor webdesigners. De mensen die markup in je webapplicatie, de screens in Photoshop, je kunt van Photoshop naar HTML, je kunt dat laten zien naar je klanten. Als de klant zegt, wow, dat is geweldig. Het is echt snappig. Het voelt als als je bijna compleet is. Dan ga je op de webapplicatie maken van het. Dus je neemt dat HTML, je maakt het in je e-clips of netbeensproject, en je is gemakkelijk met de Wicked identifiers. En je begint met Java code. Met Wicked, code en markup zijn helemaal beperkt. Zodat je in de browser javascript doet, dat is natuurlijk in je markup. Dus, gewoon Java. Als je kijkt naar de markupvorm, dit is de Ruby en Reels template. Je ziet er veel code in, en er is ook een controller op de achterkant die de vorminput krijgt. Als je iets zou willen creëren zoals dat met Wicked, zou het iets zoals dit zien. Eerst kreet je een vormcomponent, en een vorm krijgt een ontsubmitsmessage. En binnen dat ontsubmits, je kunt je dingen doen, zoals om de user te saving, booking een trip, dat soort dingen. Je hebt de vorm op de page. Als je het op de user wil geven, is het leuk om feedbackmessages te laten zien. Dus we creëren een feedbackpanel, een Wicked core component die een errormessage zet. We kunnen zeggen dat het alleen moet worden gevoeligd als er feedbackmessages zijn, zoals de if-then-else construct in de Ruby en Reels page. En we dragen het op de vorm. Naast de fields. We hebben een empty e-mail-text field. We dragen het op, we dragen het password field. En we dragen een andere confirmation password field. En dat is wat je moet doen in Java om deze vorm te creëren. Dus het is gewoon Java. Oké. Nu echt niet vallen sleepen, please. Ik zal het gewoon luisteren. Just Java, no logic in your markup, just in your Java files. Components are objects, so you can instantiate them using just new, or you can subclass components with extents. You can use object-oriented techniques in your programming. You can create encapsulated components that work on their data and give events to other components, et cetera. And we did our best to minimize the number of XML files you need to provide with Wicked, exactly one. And that's mandated by the server specification if you're running on JEEs before number six. So no XML. Quickly, the concepts, we have components. Components manipulate markup. They render content, for instance, a label, manipulates, doesn't manipulate its markup itself, but it renders the content you provided. If you have a label that should show a name, it just renders the name. Components can also receive events, like a link. If you click on a link, you get an onclick event. Wicked has models, and with models you can provide data to components. Components need to work on data. A label needs to know what it needs to display. A link that deletes a user from your database needs to know what user to delete. Models also store data for components. For instance, an input field needs to store the input provided by the user. But it also needs to render the value that's going from your database. So that's a two-way street. Models can also transform data. You can receive a string for your database and transform it into a phone number or vice versa. And you can use models to retrieve your entities from the database. Examples are model and property model. The last concept I wanted to introduce are behaviors. Behaviors are decorators or adapters for components. They can manipulate the markup of a component without the component knowing about it. They can receive events. You can receive an onclick in a behavior. You can add AJAX functionality to components that are not AJAX aware. For example, you can create a label that just increases every time it increases account every time it is rendered using AJAX self-updating timer behavior. You add it to the label and the label will continuously update itself. So, I'm getting started. If you go to Wicket, if you think Wicket, it's an arcane framework, nobody knows about it. There's actually quite a community around it. We have, of course, our own project, Apache Wicket. It contains our core stuff and it's all Apache licensed. We have a Wicket stuff project, which is a community project where anybody can sign up and publish their Wicket components libraries. There's a scene for Wicket. There's a Y query and a J query integration. It lag before Wicket for quickly getting started with Wicket applications. Apache ISS, Domain Driven Design framework dat has a module for Wicket, it's currently incubating in Apache. Jolira, tools, that's a component library for creating stateless web applications with Wicket. It powers the mobile website for Walmart and visual record Wicket, also lots of standalone components that are not dependent on a particular Java framework, a JavaScript framework. Apache Wicket projects, we have core, that's the core library where all the functionality exists to make your Wicket applications. Extensions contains additional components, richer components, things you don't need directly to create your own application, but most people typically use extensions as well. We have a quick start to get to running fast, integrations with spring and use, a data picker, a project to use velocity templates, markup templates in your Wicket application, a small authorization and roles project to create secure applications, and finally the examples display almost any component in our, that's hosted at Apache. When I told you that Wicket stuff is community hosted, well, you can see how many projects there are. These are all top level projects, there are some sub stuff as well. There's, for example, a Java EE inject, so for the dependency injection JSR. So if you want to get started with Wicket, we provide a nice page, the quick start page, and you can generate a command line for Maven. Who uses Maven? Okay, quite a lot, who enjoys it? The half about it, okay. I enjoy it most of the time. So if you go to this page, you can fill in a couple of things, your group ID, your artifact ID, the Wicket version you want to use, and you copy-paste the command line. So you open a DOS box or a terminal window, you paste in that command, and you really don't want to type this in. You press enter, Maven does a thing, starts logging like crazy, and you can then run the quick start application with jetty.run. You press enter, you get this nice console, and finally it says, started jetty server. You open a browser, you go to a localhost, colon 8080, and you get presented with this nice helpful page. And from that moment on, you can start running, hacking on your Wicket code. It's quite nice project to start developing or to spike small stuff. If you want more, there is this project called Legup, and they provide integrations with quick starts for Wicket with Spring, Juice, JDBC, GPA, Hibernate, and Scala. So if you want to learn more, there are a couple of books in German, Japanese, and English. En I think there's someone trying to translate one of the books into Portuguese. So if you want to learn more about these books, it's there they are at the website. Some quick examples. First, Hello World, the infamous example. So if you want to display the Hello World text, we create some markup displaying Hello World. We want to replace the text Hello World. So first thing we do to make it wicked enabled is to add the Wicked Component Identifier. In Java code, we add the label to the page with the same component identifier and the text Hello World. And voila, it renders Hello World. A more complex example, not too complex, a link counter, a link that counts the number of times it's been pressed. So we create the text. We add some markup so we have a link. We add a span so we can update the text. We provide it with Wicked Link Identifier and the label with another identifier so that Wicked knows about them. In Java code, we create a page, a constructor. We provide it with the number of times the link is clicked. We create a link that when clicked increases the count. We provide it with a label with the ID clicks and that binds its output to the clicks field using a property model. The property model provides the data for the label. And we're done. Wicked is a nice framework for developers. There are two modes for running your application, development and deployment. If you run in development mode, which is the default, you get this nice big red error message on standard error and you shouldn't deploy your applications using the development mode because development mode is particularly tuned for developers. So you get nice error pages showing huge stack traces. You get dynamic markup reloading. So if you modify your markup, the markup gets reloaded into the final page. There's no caching enabled. The CSS and JavaScript are not optimized so they're not minimized, they're not compressed. It's tuned to discover mistakes, programming mistakes, mistakes early, like serialization errors or missing components. And finally, it shows the Wicked Debugger quite prominently. Conversely, if you run in deployment mode, which is used for production, we do our best to make the experience best for users of your application. So you have markup caching. We don't check everything. We don't display those huge stack traces to users. Users don't like to see a null pointer exception. They just want to know there's an error or rather they do not have the error. We minimize and compress JavaScript. We don't generate the Wicked tags in the markup. In development mode, those are visible and the Wicked Debugger is not visible. A great tip, don't perform your performance test using development mode. Once every six months we get a message on our user list, someone saying, oh boy, Wicked does not perform. The first thing you ask, did you run it in development mode? Because of all the checks we do, it's slower than usual. So quick look at the debug window. So if you have the link counter page, at the bottom you see a link for our debugger. If you click on it, you get a nice small window and that shows everything that happened with Ajax in Wicked. For example, you can see what components have been transmitted using Ajax. You can see the markup quite well. Our error messages are also very nice. This is one I created. Unable to find a component with ID count in your homepage. This means you declared the component in your markup but that you did not add the component to your page or the hierarchy does not match. Really nice message. And we tell you even where in the markup the offending stuff is. So, another thing that's really nice about Wicked is that you can test your pages. Anybody writing unit tests for their user interface? Not that money, anybody writing unit tests at all? Oké. Met Wicked tester, a class we provide for Wicked, you can test your components directly or you can create the markup. You can run your test without starting a server so you can just run them in your JUnitRunner. You can test all the server-side interactions with Ajax. We don't start the browser so you can run JavaScript in a browser but you can simulate a browser connecting with your page using Ajax. So, it runs in your IDE using and or in your Mason builds and you can achieve quite high code coverage. Committer for projects claims he has 100% code coverage for his application, but he's quite anoretentive. Testing examples are testing Hello World. So, we create a test method. We create a Wicked tester class. We tell the tester to start with the Hello World page and we assert that the text that's displayed contains Hello World. And boom, we have 100% code coverage for our Hello World page. The click count test, we create a method, we instantiate the tester. We tell the tester to start with our counting page. We assert that the model value of our label is zero. We start, nobody has clicked on the link yet and we click the link and we assert that the model value is one. And there we have it, again, 100% code coverage. While Wicked tester has some limitations, there are some extensions made for it. One by Kentong, page test. He is promoting it quite well. I haven't used it yet. Another framework that's quite well is J. Dave. And it's a behavior driven framework where you can create the right specifications for your unit tests and also for your Wicked pages. Pretty awesome library. So, in summary, Wicked is widely used. It's component oriented. It's a Java framework and it's open source. Ik wilde je iets vertellen over wat er in de volgende Wicked-release komt. Eerst, we hebben wat html5-support gekregen. Het is niet de beste, maar als je een current Wicked-version gebruikt, dan bevatten we dat voor een valid markup. Dat werkt niet goed in combinatie met html5. Html5 defines text, h-email, een nummer, een date, een search, en een URL-fielde. Dat zijn de mooie fielden die je krijgt op je mobiele device, waar je een speciale keyboard voor nummers of een URL of een e-mail hebt. En in Wicked we checken voor programmer errors. En precies html5, er was geen e-mail-textfield en er was geen search-textfield en er was geen URL-textfield. Dus, iets anders dan een hittere password of een text, dat was iets dat we zeiden, oké, je hebt het misgemaakt in je markt. Dus dat is niet heel mooi. In Wicked 1.5 geven we textfielden voor die componenten. We gaan zien hoe we dit met de validaties die er in zijn, in de browser, en andere dingen. Maar dat is waarschijnlijk post Wicked 1.5. Eerst wilden we de support uitdrukken en dan doen onze dingen. Dan proefen we het. Wicked 1.5 was lang in ontwikkeling, maar dat was mostly because we tried to optimize our internals or improve our internals. Een van de dingen die je ziet als een Maven user of een End user, is dat we de core library split-up. Altijd hadden we gewoon een grote jarffile called Wicked.jar. En in de nieuwe wereld hebben we Wicked Request, Util en core. We split dat-up want we wilden de request-processing ontwikkelen. De code was goed afgesproken, en we wilden alles connecten met iets. We wilden het een mooi, clean, separate bunch maken, zodat het makkelijker zou zijn om te blijven. Als je een Maven user is, dan moet je op een Wicked core dependen. Als je op Wicked extensions of Wicked springt, dan krijg je Wicked core automatisch. We simplifieden onze request cycle. In Wicked 1.p, Wicked 1.5, decoding request-handling was done in a state machine. Is er iemand die de Wicked internals gebukt heeft? 1, 2, oké. Dus je ziet de steppenpart en met een clause dat als er een aantal steppen zijn, je was meer dan 10.000, dan moet je een acceptie hebben. Nou, dat is gegaan. De debugging was interessant. De Wicked 1.5 request cycle was designed for flexibility. We wisten niet wat je wilde doen met Wicked of wat was de mogelijkheden. Dus we hebben het heel flexibel gemaakt. En het is een gevaarlijke deel. Na 4 jaar met Wicked, of 5 jaar met Wicked, het was een beetje ingeëerderd. Veel bugfixers waren ongeveer opgemaakt, een nieuwe functie, dus we hebben het heel nieuw en veranderd. Dus de request cycle-proces in 1.5 is helemaal rewitten. Proberen je niet te beantwoorden over het, maar als je gaat om de code. De rendering code is veranderd en geïnteresseerd. En de URL rendering is helemaal rewitten en is ook simplifiëerd. Precies kon je... De URL-generatie was veranderd rond het core framework. Het is nu in één plek. Een ding dat je kunt beantwoorden, is dat je je eigen custom request cycle-proces hebt. Dat is niet meer... Het is nog steeds een mogelijkheden, maar het is beter om onze nieuwe feature te gebruiken. Als je een custom request cycle hebt, moet je uit een web request cycle extenden. En dat werd problematisch met wat add-ons, zoals als je een hybronate request cycle hebt, dat is simpel aan de open-session in view filter. Dus op de start van de request, je open- en hybronate-session, op de einde van de request, je je session uitgaat. Dat collijde met... Als je een ander framebrak zou willen integreren, dat ook het eigen request cycle heeft gecreëerd. Want op Java kun je alleen van één superklaas extenden. Dus er is nu een request cycle-listener die dezelfde eventen als het request cycle heeft. Dus je hebt de on-begin-request, on-end-request, en on-detach. En je kunt iets handelen met accepties. Dus je kunt ze aan de... ...configureeren in je page, of in je app, op de init. Dus je hebt een nieuwe request cycle-listener, een nieuwe i-request cycle-listener, etc. Een van de meest grote proefen in Wicked, en het is een feature request, sinds ik denk 1.2, is om te kunnen... ...publiezen, eventen, en te abonneren op eventen, zonder een eventenbus. Dus in 1.5 hebben we nu een component eventenbus. We hebben een interface i-eventen source. Dat zijn objecten die eventen kunnen senden. En we hebben eventen syncs die eventen kunnen ontdekken. De participants van een Wicked framework-perspectief zijn componenten, de request cycle, de session en de applicatie. Dus let's take an event bus, let's take a look at an example. Again, the link counter page, but first we upgraded to AJAX functionality. So here we have the Java code, where we left it. First we tell Wicked to output a markup ID for our label. Otherwise you can't update it using AJAX, using document get element by ID. And replace the markup. Next we make the AJAX link, the link in AJAX link, and it gets an AJAX envelope. And to the AJAX envelope we add the count label. Now, this is currently in Wicked 1.4 the way to do AJAX. And if you wanted to make the link unaware of the other components it needs to update, then you need to provide some code your own. So, p event bus, it's pretty... It's not that nice that link needs to know which component it needs to update. If you want to add another component to your page and someone is not aware that the link should update it, well, that's hard. It makes code brittle and harder to maintain. So a better way is to make the label refresh itself when an AJAX request passes by. And that's done with the event bus. So here we have the counter again. We have the target add component en we replace it with a send message to send the event to the bus. There are a couple of ways in how you can send events to the application or to all components, et cetera. That's done with the broadcast parameter. And next we need to create a component that is aware of these events. We create a count label class that extends label, it's constructor and sets its output markup ID. In the onEvent method, we do our logic. So if the event's payload is something the link of the label is interested in, in this case an AJAX request target, we add ourselves to the AJAX request target. So, now that we have an event bus, we can see it's a bit more code. You need to create your own class. Your components need to become aware of the event bus. Updating components is now completely decoupled. So the components that want to update themselves in the markup are decoupled from the components that receive the events. One of the things you can do is make the event that you publish more typesafe. So instead of an AJAX request target as the payload, you can use, create a count event so that only the components that are interested in the count event get re-rendered. And finally, AJAX request automatically create a default event with the AJAX request target as payload. So in this example, I didn't have to need to publish the AJAX event. And this is just the surface of the stuff that has been changed in Apache Wicked 1.5. There's a complete migration document where we publish all the APIs that have been changed, all the deprecations that have been removed. En lots of other stuff that has changed. So I wanted to ask if there are questions for me. It's really early. I don't bite. What's the threading model behind the event bus? Are these events distributed synchronously or is there a Q-e-metallism in the positive world? The question is, is there a threading model behind the event bus? The event bus is... If you have a request going into Apache Wicked, the user for one request, there can only be one request happening for a particular page. So you have a single thread programming model for Wicked. Your components don't need to be aware that there are many threads running, unless you're doing things like keeping a session in a static field, like a co-worker of mine did. So you have a single thread programming model and the event bus just builds up on that. So there's no thread dispatching mechanism for the threads. Is that... Okay. Any other questions? Yes. To run errors, to compile errors, if the ID doesn't fit, I see it at runtime, not at compile time. Okay, the question is, is it possible if you make a mistake in your markup, the error page I showed earlier with the message that you forgot to add a component to your page, and if you can make that compile time, so you can run your maven build or your compiler warnings. Your compiler gives you error messages that you forgot something. It's quite difficult to achieve that because the Wicked component model is very dynamic. You can add and replace components at will. That said, I remember that in NetBeans and in IntelliJ, there are plugins available en they give red square lines if there's an ID, if it's not available in either the markup or in the page. So there's some IDE support, but not for Eclipse. And there are people who have... There's some discussion on the user list about such a plugin for maven that tries to do something similar like that. Basically, what I do is just try to create a page, create a unit test for every page in my application that just instantiates the page and fills the unit test. Any other questions? J2, I was wondering how this is combined because with Wicked you control the page flow and the dynamics from the server by getting all the click events, whereas in jQuery applications control fc from within the browser. Oké. In the beginning I said that there was a... a ViteQuery project for integrating Wicked with jQuery. The question, repeat the question. So the question is, how does that work? How can you integrate jQuery, which is a JavaScript client-side library with Wicked? Most of the time, at least in my experience, is that you want to leverage all the jQuery widgets that are available, a date picker or a nice panel that opens and closes accordions, et cetera. And most of the stuff happens at the client-side and the server does not need to be involved in it. So what we typically do is just generate all the components you need for your widget. For instance, for your accordion, you have five panels, you generate the five panels in your markup and you attach the accordion vikrary behavior to that panel or to that list of panels. And that does its magic. So it's very easy to add jQuery behavior to your Wicked components using vikrary. It's just a couple of lines of code. And some events use the Wicked event bus to communicate. But there's no separate bus for jQuery events to Wicked. Is that enough? OK, it's quite well documented and the code is very, very readable. They also use the very nice feature of Java. You can use the dollar sign as an identifier, similar to JavaScript. So they've used the dollar identifier for using vikrary components. Any other questions? I see a hand rising, but that's not. OK, well then I think that's a wrap. Thank you.