Loading Onyx Onyx exists outside of the Enyo core, so it has to be loaded with its own script and link tags. Our updated version of package. You can do this by adding classes: "onyx" to your application kind definition, so that TwitterSearchApp. Control, classes: "onyx", Since onyx.

Author:Tazil Goltijind
Language:English (Spanish)
Published (Last):10 April 2014
PDF File Size:6.51 Mb
ePub File Size:6.17 Mb
Price:Free* [*Free Regsitration Required]

Enyo provides the ability to easily create new kinds based on existing kinds, and to wrap common functionality in published properties or collections of components. This is the basic building block used to make all the widgets and content that will be rendered into your Web page. Control is a kind defined in the Enyo code using the enyo. To create a new control, call enyo. Control as a constructor, passing in an object containing properties for the new instance. For example, the following code creates a paragraph showing the text "Hello, World!

Control object in the control variable, but nothing is visible to the user because nothing has been added to our HTML. In Enyo, there are two ways to make a control visible.

This causes the control to render its contents to a string, which is then output into the DOM using the document. Continuing with our example, the following code will render control into document. Returning to our "Hello, World" example, you may have noticed that the generated HTML includes an id based on the name property of the control.

If we expect to make lots of "Hello, World" controls, we can simplify the process by defining our own kind, like so: enyo.

You may remember from enyo. The same pattern applies to other properties, too. For instance, you could call control3. So we would create the previous effect like so: control3. The first is a display widget to take the raw data for a tweet and show it nicely on a Web page. In Enyo, controls have many capabilities beyond simply rendering their own content.

Control is derived from enyo. Component , and a component may act as host to a whole hierarchy of items. So, if we wanted to make the "red" list item display in red, we could write list. Note that if you try to modify the content property of list, nothing seems to happen. For a control, having children takes precedence over having content, so when the control is rendered, you only get the content of the children, not that of the control itself--in this case, list.

Now, how can we apply what we know about controls in the context of our Twitter search app? When you perform a search using the JSON interface, the matching tweets come back as an array of objects. We can ignore most of the properties of these objects, but we want to pay attention to a select few: name, avatar, and text. A simple way to render this data in HTML would be to make a div with a border and some internal padding, place the avatar icon inside it floated to the left, and show the username in bold and the tweet text in a normal font.

In our components block, we do not specify kinds for the individual components, instead allowing each component to inherit the default kind, enyo. For example, you could define a list widget in which the child controls are list elements by default. Next, we override the create method and call the changed methods of all the properties. This is a very common pattern when working with components that have properties.

Since the properties are all being changed prior to rendering, the rendering itself is pretty lightweight. If, instead, we changed the properties after the control was rendered, the control would be re-rendered after each property change. Now, if we create a Tweet object Control; l. If you look at the l. If you wanted to remove the second item, you could use the code l. This abstraction supports the routing of events between controls and components, while also facilitating the handling of synthetic events in which the framework abstracts away such things as the distinction between mouse events and touch events.

The TweetApp kind will contain simple controls for a button and a div. The following code creates these controls and adds a new Tweet to the div container: enyo. Second, in the components block, the button definition includes an ontap property. Enyo automatically hooks up most of the common DOM events. In this case, we could have used "onclick" instead of "ontap", but we chose to work with the "tap" event because the framework synthesizes it from either mouse or touch events.

The addTweet handler method follows a standard model. The second parameter is an event object; depending on the event, there could be other parameters with additional information. The third and final thing to note is the appearance of a new attribute in the createComponent call--namely, container. This lets us create the Tweet object with its owner being the top-level application object, even though the object is contained within tweetList for layout purposes.

Instead, you have to call the render method yourself. Enyo apps are usually structured as a set of. Define the contents of the package by adding a package. Within package. Assuming that we saved our Tweet kind definition in Tweet. The order is important, as that determines the order in which the JavaScript code is loaded and run. You need to list kinds that stand alone first, then the kinds that depend on the standalones. You may also list directory names; if you do so, the Enyo loader will try to find a package.

For example, our app. To perform a Twitter search, we need a field in which to enter the search term, a button to start the search, and code to handle making the request, interpreting the results, and preparing the list of tweets to display. This is because of a security feature of browsers that limits the servers with which an XMLHttpRequest can communicate to ones sharing the same origin. However, as Web APIs have become more and more popular, a scheme has been devised to get around this limitation.

Enyo has a built-in method that wraps XmlHttpRequests the enyo. Xhr and enyo. Ajax code. This uses the script method to load a foreign URL, so it allows cross-domain access, but you must be able to trust the remote site completely, since its code will be running in the same context as your own application. More details on this and all the other supported parameters may be found in the Twitter Search API docs.

I used it with this output to determine what fields are returned. There are fields indicating the current maximum tweet ID, and how to request the next page of data, but what we really want is the tweet data in "results". Note that package. The search method takes the search term from the input field, creates a JsonpRequest object, sets up a success callback, and then initiates the request.

We use a new Enyo method here, enyo. This happens when we get a response back from Twitter. First we destroy any existing tweets that were displayed from a previous search; then we use the enyo.

A user on a mobile device or other slow network link may find it helpful to see a spinner or some other indication that the request has started. It would also be good to apply more styling to the results. See the docs for enyo. Control for information on the methods and attributes governing the application of CSS classes to controls. Thanks for sticking with this, and enjoy coding with Enyo! Continue to part 2 of the tutorial covering the Onyx and Layout libraries!




Set up your development environment There are four main tools that make up the bread-and-butter of Enyo development: Your favorite code editor A Git client, for checking out an Enyo bootplate template Node. Although not strictly required, the server will let you avoid browser security restrictions in Chrome, among other benefits. First Steps with Enyo provides detailed instructions for obtaining and installing these tools, along with some suggested choices where appropriate. If you are already familiar with the tools, feel free to install them on your own and move on to step 2.



Tezahn Sample App using Enyo framework Tizen Developers To use this sample in application user has to know how to setup an enyo framework. The Onyx component set is designed with mobiles and tablets in mind. Below is the final code with proper layout enyo. Below is the code for rotating and skewing the image. Too difficult to understand. Components can also be combined together to create more complex components. It is object-oriented and uses object-oriented concepts such as encapsulation to create reusable code.

Related Articles