. And this is the base Getting started! Liferay Logo." />

Read PDF Getting Started with Liferay Alloy UI

Free download. Book file PDF easily for everyone and every device. You can download and read online Getting Started with Liferay Alloy UI file PDF Book only if you are registered here. And also you can download or read online all Book PDF file that related with Getting Started with Liferay Alloy UI book. Happy reading Getting Started with Liferay Alloy UI Bookeveryone. Download file Free Book PDF Getting Started with Liferay Alloy UI at Complete PDF Library. This Book have some digital formats such us :paperbook, ebook, kindle, epub, fb2 and another formats. Here is The CompletePDF Book Library. It's free to register here to get Book file PDF Getting Started with Liferay Alloy UI Pocket Guide.

In fact the only script tag you'll ever have to add to your page is the one for the "seed" file this is the bare minimum code needed to define the library.

Let's say we wish to have a modal Dialog on our page. To do that, all we need to do is say: AUI. This call is what returns the Alloy object that we wish to work with. You'll notice it looks like a function call, and that's because it is. What it returns is an object that will contain the components and variables loaded by whatever components we decide to use.

New & Used Books

On the Alloy object that we get back from AUI , there's a method called. For instance, we could always have done: AUI.

This function is the callback that will be executed whenever our modules are all loaded and ready to be interacted with. What is that A variable? That part is important.


Liferay Debuts Portal 6EE with New UI Tools, Analytics, and Extensibility

That is a reference to the Alloy object that is returned from our call to AUI. This part is sometimes confusing for new users: why do we have an A variable and an AUI call? This means that you could have multiple instances of the same YUI or Alloy object on the same page. What's the benefit of this?

  1. Introduction to Front-End Development.
  2. Insiders Guide to North Carolinas Mountains, 10th: Including Asheville, Biltmore Estate, Cherokee, and the Blue Ridge Parkway (Insiders Guide Series).
  3. 4 Comments?
  4. Alloy UI Font Awesome Cheatsheet;
  5. Elmer and the Hippos (Elmer eBooks).
  6. Search form.
  7. Wintergreen.

Let's say you have an application on your page and you want to use the sortable module. And let's also say that somewhere else on your page is another application, written by someone else, that also wants to use a Sortable module, but they're using a completely different plugin that has different methods and variables defined. YUI3 will sandbox these applications by default so that they can be each have their own set of modules loaded on them. AlloyUI however, operates slightly differently.

By default, we cache this object. If you call AUI 5 times on the page, it will always load on the same instance. This 1, prevents us from having to reload the configuration again on the same instance, but also allows us to behave as many users expect. You can however, easily switch the behavior of the AUI object. There are a couple of benefits of running this way: 1. You don't need to preload JavaScript on pages where the modules might not even be used.


For instance, before AlloyUI, we have had cases where we needed to add a fairly large JavaScript component, such as a datepicker, to the global JS file because buried on some page of an app, it happened to use this one component. And slowly, over time, people would add new features, and it would increase the size of the JS file. The JS to load the components won't block rendering of other elements.

The modules that you're using, if you loaded via a regular script tag, would block all other elements on the page that were referenced after it. This allows you to load the interactable portion of the UI upfront with additional interactivity lazy-loaded. Apps can avoid variable conflicts when each one loads up their own set of modules. It helps produce more modular applications and components rather than giant monolithic ones that can't be reused.

However, there are some "gotchas" when working with this sort of pattern to watch out for: 1. If you have UI that shouldn't be interacted with before the JS is finished loading, provide either a graceful degradation, or some sort of indicator that loading is happening. There is also the common downside to this approach where you have to know which modules you should "use" and what functionality they provide ahead of time.

We try to minimize this pain a bit though, which we'll go into later on. So, let's jump into some common things you may want to do in JavaScript.

New & Used Books

If you use A. Often, you'll want all of the items matching it, in that case run A. Another key difference is that if A. However, A. If it doesn't find anything, it's an empty collection. Quick note: There is often some debate about which method to use or if there should even be two methods. The argument for using A. You can use which ever you feel comfortable with, but we choose A. Because 1, if an element does not exist where we think it should, code that relies on it existing later is likely to cause bugs if instead of returning null, you keep executing as if it is there.

The other reason is because most of the time, we want a single element via ID, and this is much faster using A. Most of the common ones from jQuery are there, such as :checkbox, :checked, :input, :button, :hidden, :text, :header, :visible, etc. This means you could get all of the checked checkboxes on the page with A. Traversing through elements Once you've grabbed the elements you want to work with, you'll often want to move around to other elements that are located somewhere in relation to the ones you currently have. And there are only 3 directions you'll really ever want to go: up, down, or across.

Liferay Tutorial 09 :- Validation in Liferay using liferay ui

Let's assume you have an element assigned to a variable called myElement. Very often, you'll want to find some children of the current element s.

Mohib mansuri (Author of Getting Started with Liferay Alloy UI)

This is pretty easy, as any object that you get back from A. So let's say you want to find some child or children of myElement that has the CSS class of '. When you want to move up, there's only a couple of operations you want to do: grab the first ancestor you find, grab all of the ancestors of the current element, or grab an ancestor or ancestors that match a specific selector. There are often a couple of things you may want to do with elements on the same level as the current element s you have. If you wish to get some attribute or property from an element, using.

  • A Gentlemans Kiss?
  • Upcoming Events!
  • Uploaded by.
  • This also removes the ambiguity between when you read the property and when to read the attribute. We have also added helper method called. CSS If you want to get or set styles of an element, it's easy to do with the getStyle and setStyle methods. It's often common that you'll want some piece of the box model from multiple sides at once.

    Liferay User Interface Development

    For instance, often we'll need to calculate the margin for the right and left side. So instead, with any of these methods, getMargin, getPadding, getBorderWidth, you can pass in a string specifying the sides you wish to calculate and it will return a number with those totaled together. The sides are passed in as t,r,b,l standing for: top, right, bottom, left. Ignore Learn more. Watch Star 1. Dismiss Document your code Every project on GitHub comes with a version-controlled wiki to give your documentation the high level of care it deserves. Sign up for free See pricing for teams and enterprises.

    Home Jump to bottom. Welcome to the alloy-ui wiki! AlloyUI consists of more than 70 extensions, plugins, and widgets that leverage the YUI3 library, and extend its functionality. However, we'll try to cover some of the basic's here that might be confusing to people fresh to JavaScript: Functions can be passed to other functions like any other value can. In JavaScript, functions are called "first class objects". MVC Portlets.

    Liferay Faces. What if you want to skin Liferay or customize it? Creating themes and customizations is easy in Liferay. Themes and Layout Templates. Customizing Liferay Portal.