Introducing Apache Wicket
Dashorts, Martijn
Apache Wicket is a component oriented Java web framework. With proper mark-up/logic separation, a POJO data model, and a refreshing lack of XML, Wicket makes developing web-apps simple and enjoyable again. This talk provides a short introduction to the framework's concepts: components, behaviors and models. We'll take a short look at integrating with Spring and integrating with JQuery. For the test infected we'll cover testing your web pages with Wicket's internal test framework. But most importantly we'll take a look at the new Wicket release 1.5 and see what has changed for the better and worse
 Okay, I'll be talking about Apache Wicked, component-oriented web framework. This is the agenda. I'm going to introduce Apache Wicked a bit, and I'll be talking about our upcoming release, 1.5, and then I'll take some questions. First about me, I'm Martijn Dosshoest. I work for Tobicus, a Dutch-based company building web applications. I'm the chair for Apache Wicked, that means that I'm mostly sat on. People like to sit on me like the board of Apache and my fellow committers. I commit sometimes to the Wicked project. I'm an Apache member, and I wrote a book about the framework I'm going to talk about. The introduction. What is Apache Wicked? It's a component-oriented web framework using just Java and HTML. It's open source, otherwise I wouldn't be standing here. Apache license, so anybody can do with it whatever they want. It was created in 2004. I already said it's a Java web framework. It's component-oriented, and you can find it at the URL at the bottom. So who's using Wicked? Anybody here using Wicked? Show of hands. Not that many. Okay. Don't feel lonely. There are other people using Wicked as well. Add skill. I never heard of it. It's a German ad company. It's in the Alexa top 2000 of worldwide websites. I never heard of it, but apparently it works pretty well. Other websites, mobile Walmart, the biggest American retailer in the world. A dating website, something for song text, a portfolio for uploading your sharing your photos. If you're a woman and over 40 years old, there's this nice forum for you with lots of interesting articles. For the Dutch people here, it's a trip, selection website. It's Wicked-based. Other Dutchies, Marco Borsado, a very famous Dutch artist, his website is also built with Wicked. If you want to go to Mexico, this website is built with Wicked. If you need to go more formal with a nice tie, you can buy them with Wicked. In the late hours, you can play an online game using Wicked. You can drink wine while you're playing. If you run Windows, anybody runs Windows? Wow. One. You can buy antifiers, products with Wicked. And finally, if you want to go to Las Vegas, you can book your trip here. But I can't tell you anything about it because everything that happens in Vegas stays in Vegas. Couple of quotes from our users. Mobile. The Walmart.com supports three categories of mobile devices using the same Java code and only the HTML is very different. You can imagine that Android and iOS mobile phones are pretty much in the same ballpark, but Windows Mobile 6 is really a drag with parsing HTML, so they need to serve different HTML for that. The guys from Vegas.com, they also launched Mexico.com last year. They just reused their existing application and created a whole new website for booking vacations and holidays in Mexico. They found that reuse of their code was tremendous. So when I told you that what Wicked was, it's a component or a web framework and uses just HTML. So let's explore that a bit. Let's create this signup form. I took this example from Railscast. Anybody familiar with Railscast? It's a very nice online website where someone makes videos, screencasts of building Rails, small Rails components. Usually five, ten minutes times. It's really nice to get a feel of Ruby on Rails. So if you want to make this in HTML5, the form would look something like this. You have a header, a form within some place to get feedback messages from your users, an email field, a password field, and a confirmation box. And a button to submit it. Using Ruby on Rails, it would look something like this. You have a special tag for Ruby code where you have for a user, you create a form, and if there are any errors, you display this part, et cetera. This looks a lot like JSPs. Anybody use JSPs? Oh, that's considerable, people. So do you enjoy it? So if you go back to the HTML, if you open this up in a browser from the file system, it doesn't look anything like the signup form. It's completely empty, except for you see the text signup, and after that, you don't see anything. It's completely blank because the browser doesn't know anything about these Ruby statements. Similarly with JSPs, all this stuff that's important for Java is not shown in the browser. So if you open up this preview in your browser, it looks exactly like that. Now, with Wicked, we use that markup. We augment the markup with a couple of placeholder tags where we tell Wicked to do something. And if you open this up in the browser, it still looks like the same form. So Wicked uses this idiom to get at the tags, the markup that needs to be manipulated. And summary, if you have, there are a couple of, there are two ways to look at your markup for building web applications. You have imperative markup, where you have code and markup intersected. It's used a lot by Ruby and Rails, JSP, Play Framework, velocity templates, and it's great for web developers. I always hear when people complain about Wicked, well, you can't do anything in the markup, what I'm used to. So there's definitely a lot of folks that enjoy working like this. And it gives quick results. If you run it, you can work pretty fast. You have a website running. I find it a problem that code and markup are not separated. So conversely, we have declarative markup. And this is used by Wicked, pioneered by Tapestry and Facelift, a JSF framework uses this as well. But this is great for web designers. The people who mock up your web application, the screens in Photoshop, you can go from Photoshop to HTML, you can show that to your clients. Once the client says, wow, that's great. It's really snappy. It feels like you're almost complete. Then you go and create your web application from it. So you take that HTML, you put it in your Eclipse or NetBeans project, and you augment it with the Wicked identifiers. And you start writing Java code. The Wicked code and markup are completely separated. Unless, of course, you're doing JavaScript in the browser, that's, of course, inside your markup. So just Java. If you look at the signup form, this is again the Ruby and Reels template. You see a lot of code in there. And there's also a controller at the back that receives the form input. If you wanted to create something like that using Wicked, it would look something like this. First, you create a form component. And a form receives an unsubmit message. And within that unsubmit, you can do your thing like saving the user, booking a trip, that kind of stuff. You add the form to the page. If you want to provide feedback to the user, it's nice to have feedback messages shown. So we create a feedback panel that's Wicked core component that displays error messages. We can tell it that it should only be visible when there are feedback messages, similar to the if-then-else construct in the Ruby and Reels page. And we add it to the form. Next, the fields. So we have an empty email text field. We add it to it. We add a password field. And we add another confirmation password field. And that's what you need to do in Java for creating this form. So it's just Java. Okay. Now, really, don't fall asleep, please. I'll just talk louder. Just Java, no logic in your template, 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 the markup. It doesn't manipulate its markup itself, but it renders the content you provide it. If you have a label that's a name, it 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. 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. And 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 the count. Every time it's rendered using Ajax self-updating timer behavior. You add it to the label and the label will continuously update itself. So, getting started. If you go to Wicked, if you think Wicked, 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 Wicked. It contains our core stuff. And it's all Apache licensed. We have a Wicked stuff project, which is a community project where anybody can sign up and publish their Wicked components libraries. There's seen for Wicked, there's Y query and J query integration. Lacked before Wicked for quickly getting started with Wicked applications. Apache ISAs, domain-driven design framework that has a module for Wicked, it's currently incubating in Apache. Jolira, tools that's a component library for creating stateless web applications with Wicked. It's the power, the mobile website for Walmart. And Visual Record, Wicked also, lots of standalone components that are not dependent on a particular Java framework, or a JavaScript framework. Apache Wicked projects, we have core, that's the core library where all the functionality is, it exists to make your Wicked applications. Extensions contains additional components, additional 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 Wicked application, 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 Wicked 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, Java EE inject, so for the dependency injection JSR. So if you want to get started with Wicked, 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 Wicked version you want to use, and you copy-paste the command line. So you open a Dosbox 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 localhost, 8080, and you get presented with this nice helpful page. And from that moment on, you can start running, hacking on your Wicked code. It's quite nice project to start developing or to spike small stuff. If you want more, there's this project called Legup, and they provide integrations with quick starts for Wicked 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, and I think there's someone trying to translate one of the books into Portuguese. So if you want to learn more about these books, please, 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. Now, 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. Firstly, 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 don't 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 grotes 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 quite 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 debugger. If you click on it, you get a nice small window. And that shows everything that happens 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. I'm able to find a component with ID count in your home page. This means you declared the component in your markup but 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 many. Anybody writing unit tests at all? Okay. So with Wicked tester, a class we provide for Wicked, you can test your components directly or you can create the markup. You can run your tests without starting a server so you can just run them in your JUnit runner. You can test all the server side interactions with Ajax. We don't start the browser so you can run JavaScript in the browser but you can simulate the 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 a nori attentive. 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. 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. Well, 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. It's a behavior driven framework where you can create 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. Now, I wanted to tell you something about what's coming up in our next Wicked release. First of all, we have added some HTML5 support. It's not the best support there is, but if you use a current Wicked version, our checks for valid markup don't work that nicely in combination with HTML5. Because HTML5 defines text, age, email, a number, date, search, and the URL fields. Those nice fields you get on your mobile device where you have a special keyboard for numbers or for an URL or for an email. And in Wicked, we check for programmer errors. And pre HTML5, there was no email text field and there was no search text field and there was no URL text field. So anything different from hidden password or text, that was something that we said, well, okay, you made a mistake in your markup. So that's not very nice. So in Wicked 1.5, we provide text fields for those components and we're going to see how we can expand this using the validations that are available in the browser as well and other stuff. But that's probably post Wicked 1.5. First we wanted to get the support out there and then do our stuff. Then improve it. Wicked 1.5 has been quite long in development, but that was mostly because we tried to optimize our internals or improve our internals. One of the things you will note as a Maven user or an end user is that we split up the core library. All we just had one big jar file called Wicked.jar. And in the new world, we have Wicked requests, util and core. We split that up because we wanted to untangle the request processing. The code was quite confluited, everything could connect with anything. So we wanted to make it a nice, clean, separate bunch so it would be much easier to maintain. So if you're a Maven user, instead of depending on Wicked, you should depend on Wicked core. If you depend on Wicked extensions or Wicked Spring, you will get Wicked core automatically. So we simplified our request cycle. In Wicked 1.5, decoding request handling was done in a state machine. Anybody who debucked into the Wicked internals? One, two. Okay. So you'll notice the steps part and with a clause that if this number of steps you were circling was more than 10,000, then you should throw an exception. Well, that's gone. So debucking was interesting. The P Wicked 1.5 request cycle was designed for flexibility. We didn't know what you wanted to do with Wicked or what were the possibilities, so we made it quite flexible. And, well, it served its purpose. It's after four years of running with Wicked or five years developing Wicked applications, it took on some quite engineering. A lot of bug fixes that were augmented onto it, new functionality, so we made it quite new and improved. So the request cycle processing in 1.5 is completely rewritten. Probably you don't notice anything about it except if you're going to step into the code. The rendering code has been improved and simplified. And URL rendering has been completely rewritten and is also simplified. So previously you could, URL generation was scattered around our core framework is now in one place. One thing you might notice is if you have your own custom request cycle class, that's no longer, it's still a possibility, but it's better to use our new feature. If you have a custom request cycle, you have to extend from a web request cycle. And that became problematic with some add-ons. Like if you have a hibernate request cycle that's similar to the open session in view filter. So at the start of the request, you open a hibernate session, at the end of the request, you throw your session away. That collided with, if you wanted to have another, integrate with another framework that also created its own request cycle. Because in Java, you can only extend from one superclass. So there's now a request cycle listener that provides the same events as the request cycle. So you have the on begin request, on end request, and on detach. And you can handle something with exceptions. So you can add them to the, configure them in your page, in your application, at the init. So you add a new request cycle listener, new i request cycle listener, et cetera. One of the major improvements in Wicked and has been feature request since I think 1.2 is to be able to publish events and subscribe to events without having, with an event bus. So in 1.5, we now have a component event bus. We have an interface, i event source. Those are objects that can send events. And we have event syncs that can receive events. The participants from Wicked framework perspective are components, the request cycle, the session and the application. So 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 we place 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, better way is to make the label refresh itself when an Ajax request passes by. And that's done with the Ajax, with the event bus. So, here we have the counter again. We have the target add component. And we replace it with 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 or et cetera. That's done with the broadcast parameter. And next, we need to create a component that is aware of these events. So, we create a count label class that extends label, constructer and sets its output markup ID. And in the on event 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 our self 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 takes, is now completely decoupled. So the components that need to be, that want to update themselves in the markup are decoupled from the components that you received the events. One of the things you can do is make the event that you publish more type safe. 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, and 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 centrally or is there a QM? What does it work? 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 of 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 of programming model. The event bus just builds up on that. So, there's no thread dispatching mechanism for the threads. Any other questions? Yes. 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. If you can make that compile time, so you can run your Mavin build or your compiler warnings, your compiler gives you error messages that you forgot something. It's quite difficult to achieve that because of 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 and they give red lines if there's an ID, if it's not available in either the markup or in the page. So, there's some ID support but not for Eclipse. And there are people who have, there's some discussion on the user list about such a plugin for Mavin or 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. So, any other questions? Yeah? I was wondering how this is combined because with Wicked, you control the page flow and dynamics from the server by getting all the click events whereas in a jQuery application, you control FCE from within the browser. Okay. So, in the beginning, I said that there was a Vykrie project for integrating Wicked with jQuery. The question, repeat it. Yes, yes, yes. 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 Vykrie 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 Vykrie. 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 Vykrie events to Wicked or jQuery events to Wicked. Is that enough? Okay. It's quite well documented and the code is very, very readable. They also use a very nice feature of Java. You can use the dollar sign as an identifier, similar to JavaScript. So, they've used the dollar sign identifier for using Vykrie components. So, any other questions? I see a hand-vising, but that's not. Okay. Well, then I think that's a wrap. Thank you.
 Okay, I'll be talking about Apache Wicked, component-oriented web framework. This is  the agenda. I'm going to introduce Apache Wicked a bit, and I'll be talking about our  upcoming release, 1.5, and then I'll take some questions.  First about me, I'm Martijn Dosshoest. I work for Tobicus, a Dutch-based company building  web applications. I'm the chair for Apache Wicked, that means that I'm mostly sat on.  People like to sit on me like the board of Apache and my fellow committers. I commit  sometimes to the Wicked project. I'm an Apache member, and I wrote a book about the framework  I'm going to talk about. The introduction. What is Apache Wicked? It's a component-oriented  web framework using just Java and HTML. It's open source, otherwise I wouldn't be standing  here. Apache license, so anybody can do with it whatever they want. It was created in 2004.  I already said it's a Java web framework. It's component-oriented, and you can find it at  the URL at the bottom. So who's using Wicked? Anybody here using Wicked? Show of hands.  Not that many. Okay. Don't feel lonely. There are other people using Wicked as well. Add  skill. I never heard of it. It's a German ad company. It's in the Alexa top 2000 of  worldwide websites. I never heard of it, but apparently it works pretty well. Other websites,  mobile Walmart, the biggest American retailer in the world. A dating website, something  for song text, a portfolio for uploading your sharing your photos. If you're a woman and  over 40 years old, there's this nice forum for you with lots of interesting articles.  For the Dutch people here, it's a trip, selection website. It's Wicked-based. Other Dutchies,  Marco Borsado, a very famous Dutch artist, his website is also built with Wicked. If  you want to go to Mexico, this website is built with Wicked. If you need to go more  formal with a nice tie, you can buy them with Wicked. In the late hours, you can play an  online game using Wicked. You can drink wine while you're playing. If you run Windows,  anybody runs Windows? Wow. One. You can buy antifiers, products with Wicked. And finally,  if you want to go to Las Vegas, you can book your trip here. But I can't tell you anything  about it because everything that happens in Vegas stays in Vegas. Couple of quotes from  our users. Mobile. The Walmart.com supports three categories of mobile devices using the  same Java code and only the HTML is very different. You can imagine that Android and iOS mobile  phones are pretty much in the same ballpark, but Windows Mobile 6 is really a drag with  parsing HTML, so they need to serve different HTML for that. The guys from Vegas.com, they  also launched Mexico.com last year. They just reused their existing application and created  a whole new website for booking vacations and holidays in Mexico. They found that reuse  of their code was tremendous. So when I told you that what Wicked was, it's a component  or a web framework and uses just HTML. So let's explore that a bit. Let's create this  signup form. I took this example from Railscast. Anybody familiar with Railscast? It's a very  nice online website where someone makes videos, screencasts of building Rails, small Rails  components. Usually five, ten minutes times. It's really nice to get a feel of Ruby on  Rails. So if you want to make this in HTML5, the form would look something like this. You  have a header, a form within some place to get feedback messages from your users, an  email field, a password field, and a confirmation box. And a button to submit it. Using Ruby  on Rails, it would look something like this. You have a special tag for Ruby code where  you have for a user, you create a form, and if there are any errors, you display this  part, et cetera. This looks a lot like JSPs. Anybody use JSPs? Oh, that's considerable,  people. So do you enjoy it? So if you go back to the HTML, if you open this up in a browser  from the file system, it doesn't look anything like the signup form. It's completely empty,  except for you see the text signup, and after that, you don't see anything. It's completely  blank because the browser doesn't know anything about these Ruby statements. Similarly with  JSPs, all this stuff that's important for Java is not shown in the browser. So if you  open up this preview in your browser, it looks exactly like that. Now, with Wicked, we use  that markup. We augment the markup with a couple of placeholder tags where we tell Wicked  to do something. And if you open this up in the browser, it still looks like the same  form. So Wicked uses this idiom to get at the tags, the markup that needs to be manipulated.  And summary, if you have, there are a couple of, there are two ways to look at your markup  for building web applications. You have imperative markup, where you have code and markup intersected.  It's used a lot by Ruby and Rails, JSP, Play Framework, velocity templates, and it's great  for web developers. I always hear when people complain about Wicked, well, you can't do  anything in the markup, what I'm used to. So there's definitely a lot of folks that  enjoy working like this. And it gives quick results. If you run it, you can work pretty  fast. You have a website running. I find it a problem that code and markup are not separated.  So conversely, we have declarative markup. And this is used by Wicked, pioneered by  Tapestry and Facelift, a JSF framework uses this as well. But this is great for web designers.  The people who mock up your web application, the screens in Photoshop, you can go from  Photoshop to HTML, you can show that to your clients. Once the client says, wow, that's  great. It's really snappy. It feels like you're almost complete. Then you go and create your  web application from it. So you take that HTML, you put it in your Eclipse or NetBeans project,  and you augment it with the Wicked identifiers. And you start writing Java code. The Wicked  code and markup are completely separated. Unless, of course, you're doing JavaScript  in the browser, that's, of course, inside your markup. So just Java. If you look at  the signup form, this is again the Ruby and Reels template. You see a lot of code in there.  And there's also a controller at the back that receives the form input. If you wanted  to create something like that using Wicked, it would look something like this. First,  you create a form component. And a form receives an unsubmit message. And within that unsubmit,  you can do your thing like saving the user, booking a trip, that kind of stuff. You add  the form to the page. If you want to provide feedback to the user, it's nice to have feedback  messages shown. So we create a feedback panel that's Wicked core component that displays  error messages. We can tell it that it should only be visible when there are feedback messages,  similar to the if-then-else construct in the Ruby and Reels page. And we add it to the  form. Next, the fields. So we have an empty email text field. We add it to it. We add  a password field. And we add another confirmation password field. And that's what you need to  do in Java for creating this form. So it's just Java. Okay. Now, really, don't fall asleep,  please. I'll just talk louder. Just Java, no logic in your template, 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 the markup. It doesn't manipulate its markup itself, but it renders  the content you provide it. If you have a label that's a name, it 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. 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. And 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 the count. Every time it's rendered using Ajax self-updating timer behavior.  You add it to the label and the label will continuously update itself. So, getting started.  If you go to Wicked, if you think Wicked, 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  Wicked. It contains our core stuff. And it's all Apache licensed. We have a Wicked stuff  project, which is a community project where anybody can sign up and publish their Wicked  components libraries. There's seen for Wicked, there's Y query and J query integration. Lacked  before Wicked for quickly getting started with Wicked applications. Apache ISAs, domain-driven  design framework that has a module for Wicked, it's currently incubating in Apache. Jolira,  tools that's a component library for creating stateless web applications with Wicked. It's  the power, the mobile website for Walmart. And Visual Record, Wicked also, lots of standalone  components that are not dependent on a particular Java framework, or a JavaScript framework.  Apache Wicked projects, we have core, that's the core library where all the functionality  is, it exists to make your Wicked applications. Extensions contains additional components,  additional 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 Wicked application, 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 Wicked 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, Java EE inject, so for the dependency injection JSR. So if  you want to get started with Wicked, 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 Wicked version you  want to use, and you copy-paste the command line. So you open a Dosbox 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 localhost, 8080, and you get presented with  this nice helpful page. And from that moment on, you can start running, hacking on your  Wicked code. It's quite nice project to start developing or to spike small stuff. If you  want more, there's this project called Legup, and they provide integrations with quick starts  for Wicked 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, and I think there's someone trying  to translate one of the books into Portuguese. So if you want to learn more about these books,  please, 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. Now, 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. Firstly, 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 don't 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 grotes  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  quite 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 debugger. If you click on it, you get  a nice small window. And that shows everything that happens 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. I'm able to find a component  with ID count in your home page. This means you declared the component in your markup  but 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 many. Anybody writing unit tests at all? Okay.  So with Wicked tester, a class we provide for Wicked, you can test your components directly  or you can create the markup. You can run your tests without starting a server so you  can just run them in your JUnit runner. You can test all the server side interactions  with Ajax. We don't start the browser so you can run JavaScript in the browser but you  can simulate the 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 a nori attentive. 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.  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. Well, 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. It's a behavior driven framework where you can create 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.  Now, I wanted to tell you something about what's coming up in our next Wicked release.  First of all, we have added some HTML5 support. It's not the best support there is, but if  you use a current Wicked version, our checks for valid markup don't work that nicely in  combination with HTML5. Because HTML5 defines text, age, email, a number, date, search,  and the URL fields. Those nice fields you get on your mobile device where you have a  special keyboard for numbers or for an URL or for an email.  And in Wicked, we check for programmer errors. And pre HTML5, there was no email text field  and there was no search text field and there was no URL text field. So anything different  from hidden password or text, that was something that we said, well, okay, you made a mistake  in your markup. So that's not very nice. So in Wicked 1.5, we provide text fields for  those components and we're going to see how we can expand this using the validations that  are available in the browser as well and other stuff. But that's probably post Wicked 1.5.  First we wanted to get the support out there and then do our stuff. Then improve it. Wicked  1.5 has been quite long in development, but that was mostly because we tried to optimize  our internals or improve our internals. One of the things you will note as a Maven user  or an end user is that we split up the core library. All we just had one big jar file  called Wicked.jar. And in the new world, we have Wicked requests, util and core. We split  that up because we wanted to untangle the request processing. The code was quite confluited,  everything could connect with anything. So we wanted to make it a nice, clean, separate  bunch so it would be much easier to maintain. So if you're a Maven user, instead of depending  on Wicked, you should depend on Wicked core. If you depend on Wicked extensions or Wicked  Spring, you will get Wicked core automatically. So we simplified our request cycle. In Wicked  1.5, decoding request handling was done in a state machine. Anybody who debucked into  the Wicked internals? One, two. Okay. So you'll notice the steps part and with a clause that  if this number of steps you were circling was more than 10,000, then you should throw  an exception. Well, that's gone. So debucking was interesting. The P Wicked 1.5 request  cycle was designed for flexibility. We didn't know what you wanted to do with Wicked or  what were the possibilities, so we made it quite flexible. And, well, it served its purpose.  It's after four years of running with Wicked or five years developing Wicked applications,  it took on some quite engineering. A lot of bug fixes that were augmented onto it, new  functionality, so we made it quite new and improved. So the request cycle processing  in 1.5 is completely rewritten. Probably you don't notice anything about it except if you're  going to step into the code. The rendering code has been improved and simplified. And  URL rendering has been completely rewritten and is also simplified. So previously you  could, URL generation was scattered around our core framework is now in one place. One  thing you might notice is if you have your own custom request cycle class, that's no  longer, it's still a possibility, but it's better to use our new feature. If you have  a custom request cycle, you have to extend from a web request cycle. And that became  problematic with some add-ons. Like if you have a hibernate request cycle that's similar  to the open session in view filter. So at the start of the request, you open a hibernate  session, at the end of the request, you throw your session away. That collided with, if  you wanted to have another, integrate with another framework that also created its own  request cycle. Because in Java, you can only extend from one superclass. So there's now  a request cycle listener that provides the same events as the request cycle. So you have  the on begin request, on end request, and on detach. And you can handle something with  exceptions. So you can add them to the, configure them in your page, in your application, at  the init. So you add a new request cycle listener, new i request cycle listener, et cetera.  One of the major improvements in Wicked and has been feature request since I think 1.2  is to be able to publish events and subscribe to events without having, with an event bus.  So in 1.5, we now have a component event bus. We have an interface, i event source. Those  are objects that can send events. And we have event syncs that can receive events. The participants  from Wicked framework perspective are components, the request cycle, the session and the application.  So 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 we place 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, better way is to make the label refresh  itself when an Ajax request passes by. And that's done with the Ajax, with the event  bus. So, here we have the counter again. We have the target add component. And we replace  it with 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 or et cetera. That's done  with the broadcast parameter. And next, we need to create a component that is aware of  these events. So, we create a count label class that extends label, constructer and  sets its output markup ID. And in the on event 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 our self 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 takes, is now completely decoupled.  So the components that need to be, that want to update themselves in the markup are decoupled  from the components that you received the events. One of the things you can do is make the event  that you publish more type safe. 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, and 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 centrally  or is there a QM? What does it work? 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 of 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 of programming model.  The event bus just builds up on that. So, there's no thread dispatching mechanism for  the threads. Any other questions? Yes.  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.  If you can make that compile time, so you can run your Mavin build or your compiler warnings,  your compiler gives you error messages that you forgot something. It's quite difficult  to achieve that because of 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 and they give red lines if there's an ID, if it's not available in  either the markup or in the page. So, there's some ID support but not for Eclipse.  And there are people who have, there's some discussion on the user list about such a plugin  for Mavin or 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. So, any other questions?  Yeah? I was wondering how this is combined because with Wicked, you control the page flow  and dynamics from the server by getting all the click events whereas in a jQuery application,  you control FCE from within the browser. Okay. So, in the beginning, I said that there was  a Vykrie project for integrating Wicked with jQuery.  The question, repeat it. Yes, yes, yes. 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 Vykrie 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 Vykrie. 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 Vykrie events  to Wicked or jQuery events to Wicked. Is that enough? Okay. It's quite well documented  and the code is very, very readable. They also use a very nice feature of Java. You can  use the dollar sign as an identifier, similar to JavaScript. So, they've used the dollar  sign identifier for using Vykrie components. So, any other questions? I see a hand-vising,  but that's not. Okay. Well, then I think that's a wrap. Thank you.
apache_wicket_AB8fotMumW4_1_0_131.png apache_wicket_AB8fotMumW4_1_132_179.png apache_wicket_AB8fotMumW4_1_180_659.png apache_wicket_AB8fotMumW4_1_660_1523.png apache_wicket_AB8fotMumW4_1_1524_1775.png apache_wicket_AB8fotMumW4_1_1776_2279.png apache_wicket_AB8fotMumW4_1_2280_2615.png apache_wicket_AB8fotMumW4_1_2616_3251.png apache_wicket_AB8fotMumW4_1_3252_3815.png apache_wicket_AB8fotMumW4_1_3816_4595.png apache_wicket_AB8fotMumW4_1_4596_5207.png apache_wicket_AB8fotMumW4_1_5208_5519.png apache_wicket_AB8fotMumW4_1_5520_7019.png apache_wicket_AB8fotMumW4_1_7020_7775.png apache_wicket_AB8fotMumW4_1_7776_7883.png apache_wicket_AB8fotMumW4_1_7884_10895.png apache_wicket_AB8fotMumW4_1_10896_16139.png apache_wicket_AB8fotMumW4_1_16140_18299.png apache_wicket_AB8fotMumW4_1_18300_19763.png apache_wicket_AB8fotMumW4_1_19764_20855.png apache_wicket_AB8fotMumW4_1_20856_20951.png apache_wicket_AB8fotMumW4_1_20952_22775.png apache_wicket_AB8fotMumW4_1_22776_24179.png apache_wicket_AB8fotMumW4_1_24180_24779.png apache_wicket_AB8fotMumW4_1_24780_25679.png apache_wicket_AB8fotMumW4_1_25680_26531.png apache_wicket_AB8fotMumW4_1_26532_27059.png apache_wicket_AB8fotMumW4_1_27060_27443.png apache_wicket_AB8fotMumW4_1_27444_27875.png apache_wicket_AB8fotMumW4_1_27876_28067.png apache_wicket_AB8fotMumW4_1_28068_28319.png apache_wicket_AB8fotMumW4_1_28320_29039.png apache_wicket_AB8fotMumW4_1_29040_29267.png apache_wicket_AB8fotMumW4_1_29268_29723.png apache_wicket_AB8fotMumW4_1_29724_30767.png apache_wicket_AB8fotMumW4_1_30768_31031.png apache_wicket_AB8fotMumW4_1_31032_31391.png apache_wicket_AB8fotMumW4_1_31392_32483.png apache_wicket_AB8fotMumW4_1_32484_33527.png apache_wicket_AB8fotMumW4_1_33528_34163.png apache_wicket_AB8fotMumW4_1_34164_34667.png apache_wicket_AB8fotMumW4_1_34668_34919.png apache_wicket_AB8fotMumW4_1_34920_35471.png apache_wicket_AB8fotMumW4_1_35472_35639.png apache_wicket_AB8fotMumW4_1_35640_36083.png apache_wicket_AB8fotMumW4_1_36084_39299.png apache_wicket_AB8fotMumW4_1_39300_39623.png apache_wicket_AB8fotMumW4_1_39624_39803.png apache_wicket_AB8fotMumW4_1_39804_42155.png apache_wicket_AB8fotMumW4_1_42156_42275.png apache_wicket_AB8fotMumW4_1_42276_45575.png apache_wicket_AB8fotMumW4_1_45576_46463.png apache_wicket_AB8fotMumW4_1_46464_48527.png apache_wicket_AB8fotMumW4_1_48528_48707.png apache_wicket_AB8fotMumW4_1_48708_49199.png apache_wicket_AB8fotMumW4_1_49200_51155.png apache_wicket_AB8fotMumW4_1_51156_56219.png apache_wicket_AB8fotMumW4_1_56220_56855.png apache_wicket_AB8fotMumW4_1_56856_60635.png apache_wicket_AB8fotMumW4_1_60636_60683.png apache_wicket_AB8fotMumW4_1_60684_61631.png apache_wicket_AB8fotMumW4_1_61632_65735.png apache_wicket_AB8fotMumW4_1_65736_65857.png
Okay, I'll be talking about Apache Wicked, component-oriented web framework. This is the agenda. I'm going to introduce Apache Wicked a bit, and I'll be talking about our upcoming release, 1.5, and then I'll take some questions. First about me, I'm Martijn Dosshoest. I work for Tobicus, a Dutch-based company building web applications. I'm the chair for Apache Wicked, that means that I'm mostly sat on. People like to sit on me like the board of Apache and my fellow committers. I commit sometimes to the Wicked project. I'm an Apache member, and I wrote a book about the framework I'm going to talk about. The introduction. What is Apache Wicked? It's a component-oriented web framework using just Java and HTML. It's open source, otherwise I wouldn't be standing here. Apache license, so anybody can do with it whatever they want. It was created in 2004. I already said it's a Java web framework. It's component-oriented, and you can find it at the URL at the bottom. So who's using Wicked? Anybody here using Wicked? Show of hands. Not that many. Okay. Don't feel lonely. There are other people using Wicked as well. Add skill. I never heard of it. It's a German ad company. It's in the Alexa top 2000 of worldwide websites. I never heard of it, but apparently it works pretty well. Other websites, mobile Walmart, the biggest American retailer in the world. A dating website, something for song text, a portfolio for uploading your sharing your photos. If you're a woman and over 40 years old, there's this nice forum for you with lots of interesting articles. For the Dutch people here, it's a trip, selection website. It's Wicked-based. Other Dutchies, Marco Borsado, a very famous Dutch artist, his website is also built with Wicked. If you want to go to Mexico, this website is built with Wicked. If you need to go more formal with a nice tie, you can buy them with Wicked. In the late hours, you can play an online game using Wicked. You can drink wine while you're playing. If you run Windows, anybody runs Windows? Wow. One. You can buy antifiers, products with Wicked. And finally, if you want to go to Las Vegas, you can book your trip here. But I can't tell you anything about it because everything that happens in Vegas stays in Vegas. Couple of quotes from our users. Mobile. The Walmart.com supports three categories of mobile devices using the same Java code and only the HTML is very different. You can imagine that Android and iOS mobile phones are pretty much in the same ballpark, but Windows Mobile 6 is really a drag with parsing HTML, so they need to serve different HTML for that. The guys from Vegas.com, they also launched Mexico.com last year. They just reused their existing application and created a whole new website for booking vacations and holidays in Mexico. They found that reuse of their code was tremendous. So when I told you that what Wicked was, it's a component or a web framework and uses just HTML. So let's explore that a bit. Let's create this signup form. I took this example from Railscast. Anybody familiar with Railscast? It's a very nice online website where someone makes videos, screencasts of building Rails, small Rails components. Usually five, ten minutes times. It's really nice to get a feel of Ruby on Rails. So if you want to make this in HTML5, the form would look something like this. You have a header, a form within some place to get feedback messages from your users, an email field, a password field, and a confirmation box. And a button to submit it. Using Ruby on Rails, it would look something like this. You have a special tag for Ruby code where you have for a user, you create a form, and if there are any errors, you display this part, et cetera. This looks a lot like JSPs. Anybody use JSPs? Oh, that's considerable, people. So do you enjoy it? So if you go back to the HTML, if you open this up in a browser from the file system, it doesn't look anything like the signup form. It's completely empty, except for you see the text signup, and after that, you don't see anything. It's completely blank because the browser doesn't know anything about these Ruby statements. Similarly with JSPs, all this stuff that's important for Java is not shown in the browser. So if you open up this preview in your browser, it looks exactly like that. Now, with Wicked, we use that markup. We augment the markup with a couple of placeholder tags where we tell Wicked to do something. And if you open this up in the browser, it still looks like the same form. So Wicked uses this idiom to get at the tags, the markup that needs to be manipulated. And summary, if you have, there are a couple of, there are two ways to look at your markup for building web applications. You have imperative markup, where you have code and markup intersected. It's used a lot by Ruby and Rails, JSP, Play Framework, velocity templates, and it's great for web developers. I always hear when people complain about Wicked, well, you can't do anything in the markup, what I'm used to. So there's definitely a lot of folks that enjoy working like this. And it gives quick results. If you run it, you can work pretty fast. You have a website running. I find it a problem that code and markup are not separated. So conversely, we have declarative markup. And this is used by Wicked, pioneered by Tapestry and Facelift, a JSF framework uses this as well. But this is great for web designers. The people who mock up your web application, the screens in Photoshop, you can go from Photoshop to HTML, you can show that to your clients. Once the client says, wow, that's great. It's really snappy. It feels like you're almost complete. Then you go and create your web application from it. So you take that HTML, you put it in your Eclipse or NetBeans project, and you augment it with the Wicked identifiers. And you start writing Java code. The Wicked code and markup are completely separated. Unless, of course, you're doing JavaScript in the browser, that's, of course, inside your markup. So just Java. If you look at the signup form, this is again the Ruby and Reels template. You see a lot of code in there. And there's also a controller at the back that receives the form input. If you wanted to create something like that using Wicked, it would look something like this. First, you create a form component. And a form receives an unsubmit message. And within that unsubmit, you can do your thing like saving the user, booking a trip, that kind of stuff. You add the form to the page. If you want to provide feedback to the user, it's nice to have feedback messages shown. So we create a feedback panel that's Wicked core component that displays error messages. We can tell it that it should only be visible when there are feedback messages, similar to the if-then-else construct in the Ruby and Reels page. And we add it to the form. Next, the fields. So we have an empty email text field. We add it to it. We add a password field. And we add another confirmation password field. And that's what you need to do in Java for creating this form. So it's just Java. Okay. Now, really, don't fall asleep, please. I'll just talk louder. Just Java, no logic in your template, 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 the markup. It doesn't manipulate its markup itself, but it renders the content you provide it. If you have a label that's a name, it 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. 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. And 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 the count. Every time it's rendered using Ajax self-updating timer behavior. You add it to the label and the label will continuously update itself. So, getting started. If you go to Wicked, if you think Wicked, 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 Wicked. It contains our core stuff. And it's all Apache licensed. We have a Wicked stuff project, which is a community project where anybody can sign up and publish their Wicked components libraries. There's seen for Wicked, there's Y query and J query integration. Lacked before Wicked for quickly getting started with Wicked applications. Apache ISAs, domain-driven design framework that has a module for Wicked, it's currently incubating in Apache. Jolira, tools that's a component library for creating stateless web applications with Wicked. It's the power, the mobile website for Walmart. And Visual Record, Wicked also, lots of standalone components that are not dependent on a particular Java framework, or a JavaScript framework. Apache Wicked projects, we have core, that's the core library where all the functionality is, it exists to make your Wicked applications. Extensions contains additional components, additional 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 Wicked application, 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 Wicked 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, Java EE inject, so for the dependency injection JSR. So if you want to get started with Wicked, 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 Wicked version you want to use, and you copy-paste the command line. So you open a Dosbox 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 localhost, 8080, and you get presented with this nice helpful page. And from that moment on, you can start running, hacking on your Wicked code. It's quite nice project to start developing or to spike small stuff. If you want more, there's this project called Legup, and they provide integrations with quick starts for Wicked 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, and I think there's someone trying to translate one of the books into Portuguese. So if you want to learn more about these books, please, 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. Now, 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. Firstly, 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 don't 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 grotes 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 quite 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 debugger. If you click on it, you get a nice small window. And that shows everything that happens 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. I'm able to find a component with ID count in your home page. This means you declared the component in your markup but 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 many. Anybody writing unit tests at all? Okay. So with Wicked tester, a class we provide for Wicked, you can test your components directly or you can create the markup. You can run your tests without starting a server so you can just run them in your JUnit runner. You can test all the server side interactions with Ajax. We don't start the browser so you can run JavaScript in the browser but you can simulate the 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 a nori attentive. 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. 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. Well, 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. It's a behavior driven framework where you can create 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. Now, I wanted to tell you something about what's coming up in our next Wicked release. First of all, we have added some HTML5 support. It's not the best support there is, but if you use a current Wicked version, our checks for valid markup don't work that nicely in combination with HTML5. Because HTML5 defines text, age, email, a number, date, search, and the URL fields. Those nice fields you get on your mobile device where you have a special keyboard for numbers or for an URL or for an email. And in Wicked, we check for programmer errors. And pre HTML5, there was no email text field and there was no search text field and there was no URL text field. So anything different from hidden password or text, that was something that we said, well, okay, you made a mistake in your markup. So that's not very nice. So in Wicked 1.5, we provide text fields for those components and we're going to see how we can expand this using the validations that are available in the browser as well and other stuff. But that's probably post Wicked 1.5. First we wanted to get the support out there and then do our stuff. Then improve it. Wicked 1.5 has been quite long in development, but that was mostly because we tried to optimize our internals or improve our internals. One of the things you will note as a Maven user or an end user is that we split up the core library. All we just had one big jar file called Wicked.jar. And in the new world, we have Wicked requests, util and core. We split that up because we wanted to untangle the request processing. The code was quite confluited, everything could connect with anything. So we wanted to make it a nice, clean, separate bunch so it would be much easier to maintain. So if you're a Maven user, instead of depending on Wicked, you should depend on Wicked core. If you depend on Wicked extensions or Wicked Spring, you will get Wicked core automatically. So we simplified our request cycle. In Wicked 1.5, decoding request handling was done in a state machine. Anybody who debucked into the Wicked internals? One, two. Okay. So you'll notice the steps part and with a clause that if this number of steps you were circling was more than 10,000, then you should throw an exception. Well, that's gone. So debucking was interesting. The P Wicked 1.5 request cycle was designed for flexibility. We didn't know what you wanted to do with Wicked or what were the possibilities, so we made it quite flexible. And, well, it served its purpose. It's after four years of running with Wicked or five years developing Wicked applications, it took on some quite engineering. A lot of bug fixes that were augmented onto it, new functionality, so we made it quite new and improved. So the request cycle processing in 1.5 is completely rewritten. Probably you don't notice anything about it except if you're going to step into the code. The rendering code has been improved and simplified. And URL rendering has been completely rewritten and is also simplified. So previously you could, URL generation was scattered around our core framework is now in one place. One thing you might notice is if you have your own custom request cycle class, that's no longer, it's still a possibility, but it's better to use our new feature. If you have a custom request cycle, you have to extend from a web request cycle. And that became problematic with some add-ons. Like if you have a hibernate request cycle that's similar to the open session in view filter. So at the start of the request, you open a hibernate session, at the end of the request, you throw your session away. That collided with, if you wanted to have another, integrate with another framework that also created its own request cycle. Because in Java, you can only extend from one superclass. So there's now a request cycle listener that provides the same events as the request cycle. So you have the on begin request, on end request, and on detach. And you can handle something with exceptions. So you can add them to the, configure them in your page, in your application, at the init. So you add a new request cycle listener, new i request cycle listener, et cetera. One of the major improvements in Wicked and has been feature request since I think 1.2 is to be able to publish events and subscribe to events without having, with an event bus. So in 1.5, we now have a component event bus. We have an interface, i event source. Those are objects that can send events. And we have event syncs that can receive events. The participants from Wicked framework perspective are components, the request cycle, the session and the application. So 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 we place 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, better way is to make the label refresh itself when an Ajax request passes by. And that's done with the Ajax, with the event bus. So, here we have the counter again. We have the target add component. And we replace it with 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 or et cetera. That's done with the broadcast parameter. And next, we need to create a component that is aware of these events. So, we create a count label class that extends label, constructer and sets its output markup ID. And in the on event 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 our self 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 takes, is now completely decoupled. So the components that need to be, that want to update themselves in the markup are decoupled from the components that you received the events. One of the things you can do is make the event that you publish more type safe. 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, and 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 centrally or is there a QM? What does it work? 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 of 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 of programming model. The event bus just builds up on that. So, there's no thread dispatching mechanism for the threads. Any other questions? Yes. 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. If you can make that compile time, so you can run your Mavin build or your compiler warnings, your compiler gives you error messages that you forgot something. It's quite difficult to achieve that because of 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 and they give red lines if there's an ID, if it's not available in either the markup or in the page. So, there's some ID support but not for Eclipse. And there are people who have, there's some discussion on the user list about such a plugin for Mavin or 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. So, any other questions? Yeah? I was wondering how this is combined because with Wicked, you control the page flow and dynamics from the server by getting all the click events whereas in a jQuery application, you control FCE from within the browser. Okay. So, in the beginning, I said that there was a Vykrie project for integrating Wicked with jQuery. The question, repeat it. Yes, yes, yes. 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 Vykrie 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 Vykrie. 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 Vykrie events to Wicked or jQuery events to Wicked. Is that enough? Okay. It's quite well documented and the code is very, very readable. They also use a very nice feature of Java. You can use the dollar sign as an identifier, similar to JavaScript. So, they've used the dollar sign identifier for using Vykrie components. So, any other questions? I see a hand-vising, but that's not. Okay. Well, then I think that's a wrap. Thank you.
component-oriented web framework. This is the release, 1.5, and then I'll take some questions. introduction. What is Apache Wicked? It's a look at the signup form, this is again the Ruby minimize the number of XML files you need to Wicked has models. With models, you can provide can manipulate the markup of a component without to running fast, integrations with Spring and model. The property model provides the data for example, you can see what components have been oriented. It's a Java framework and it's open event bus, let's take a look at an example. components you need for your widget. For