Enyo Developer Guide Bootplate: with Enyo in 5 Minutes · Planning and Structuring Your App · Tutorial: Building a Moonstone App. Enyo Essentials. As an Enyo developer, you have a great deal of freedom in choosing the platform . If you haven’t already done so, read through the Moonstone App Tutorial. This tutorial is geared for those already know the basic . Hope this tutorial helps in setting up the environment right for enyo development.

Author: Daimuro Narn
Country: Burkina Faso
Language: English (Spanish)
Genre: Health and Food
Published (Last): 19 January 2012
Pages: 232
PDF File Size: 14.13 Mb
ePub File Size: 15.78 Mb
ISBN: 547-9-30900-369-5
Downloads: 36500
Price: Free* [*Free Regsitration Required]
Uploader: Tygojinn

Enyo setup First download “enyo” from enyo website and extract the zip folder. The next immediate change to be made is to convert all the normal buttons to Onyx buttons and also replace the “img” tag with an “enyo.

These two combined can be used to create complex flexible layouts for applications. Published Property Enyo will create ‘getters’ and ‘setters’ for the properties defined in “Published” section of the code. The basic unit of an Enyo application is a “component”, and these “components” can combines and wired together in different ways to create an application. As a simple example, user may combine a text area, a submit button and a clear button into a search component.

FittableRows allows user to place content in rows, on one of these rows user can set the fit property to true which will give it a variable height that will expand as the page is resized. The applyStyle method applies a CSS style to the particular component.

The RotateComponent has two subcomponents, an image, which is named as “logo” and a button with a label set to “Rotate”. The advantage of this is that it disables the ability to drag the image, which is important for touch interfaces.


Enyo Beginners Guide

This tutofial then be reused across multiple applications or within the same application. To know how the image will rotate, user has to know about Published property.

This article explains a sample application that can ‘rotate’ and ‘skew’ an image. User Menu Login Register. This is as simple as adding a “classes” property to the “App” and setting that to “onyx”. First download “enyo” from enyo website and extract the zip folder. This effectively makes the component itself the app.

In this case it will be able to find out when the rotation is changed, and update the component accordingly. In this application “layoutKind” property of a control is used to apply proper layout to the application. FittableColumns allows user to place content in columns. Below is the code for rotating and skewing the image enyo. Now divide the “Rotate” button into two, one for clockwise rotation and the other for counter clockwise rotation.

Here the “onclick” property is set to ‘rotate’, which is the name of a method.

The Onyx component set is designed with mobiles and tablets in mind. It is object-oriented and uses object-oriented concepts enyp as encapsulation to create reusable code. Enyo also offers a library of components for layout. Please let us know what you think. Other reason enter details. The advantage of this is that now Enyo can notify the component when a value is changed via the setter.

To use this sample in application user has to know how to setup uttorial enyo framework. Enyo provides a number of ways to define the layout of applications, two important components for layouts are FittableRows and FittableColumns.

In the above code ‘this. Apply proper layout to the app. In the above code the name property of the image is “logo”, this gives access to the image component though ‘this.


EnyoJS Tutorial #1 – Getting Started | Is Good Stuff

We value your feedback. Was this document helpful? Below is the tutirial for the ‘rotationChanged’ method. Too difficult to understand. This article demonstrates the usage of Enyo framework.

Now create a method called “rotationChanged”, and Enyo will automatically call it when ‘rotation’ value is changed via ‘setRotation’. Inaccurate or wrong information.

Sample App using Enyo framework

After extracting, copy “enyo”, “lib”, “source” folders into “Tizen workspace”. Why was this document not helpful? Below is the final code with proper layout enyo. Replace the content of ‘index. Components can also be combined together to create more complex components. In this method this. The first thing user has to do for using the ‘Onyx’ components is to add the “onyx” class to the application.

EnyoJS Tutorial #1 – Getting Started

After adding the ‘rotationChanged’ function to the code, the image will rotate through 90 degrees when user clicks on “Rotate” button.

The above code has a published property called ‘rotation’ which is initially set to ‘0’ and will store tutorixl rotation applied to the image in the component. Now the enyo framework is ready to use. Sample Application This article explains a sample application that can ‘rotate’ and ‘skew’ an image.

So in the above case, Enyo will automatically create the methods ‘setRotation’ and ‘getRotation’ tuorial the object. In this case the image and the button are the subcomponents.

And also add two buttons for “skewing” the image.