Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Creating a Data Driven UI Framework

6,211 views

Published on

The presentation will be about the data driven UI generation with the help of angularjs. Some of the powerful features of angularjs like
Two way data binding,
Dynamic templates, and
On the go compilation of the HTML
are used to achieve the goal.
Generally, multiple HTML templates are created for different views in a web application but we are going to discuss an approach where we create dynamic dom generator based on the JSON received and what to do to write the reusable code.

Published in: Technology
  • Sex in your area is here: ♥♥♥ http://bit.ly/2F4cEJi ♥♥♥
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Dating direct: ❤❤❤ http://bit.ly/2F4cEJi ❤❤❤
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Ripley's Believe It Or Not Investigated Him After His 5th Win...(unreal story inside) ★★★ http://t.cn/Airfq84N
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • This is exactly what I was looking to see if Angular2 could do. I have a schema already set up and a server layer that can respond to any data request. layout, data and roles are all handled via metadata. I'm so excited to see that I can do this as a part of Angular. Do you see this as essentially a single page app? The single page being a container for all the other dynamically generated pages? Do you need to generate each time or is the virtual page cached? Thanks, Terence.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Creating a Data Driven UI Framework

  1. 1. 1© 2012-14 SirionLabs Private Limited. Creating a Data Driven UI Framework February 28, 2014
  2. 2. 2© 2012-14 SirionLabs Private Limited. Problems Faced • Repetitive field’s code in a single view • Repetitive group’s code in application Specific Handling For Complex UI Components • Populate UI from received data • Populate data from user inputs Data Binding For UI Elements • Even if the views have similar elements, we still had to write different html files. Multiple HTML Templates For Different Views
  3. 3. 3© 2012-14 SirionLabs Private Limited. Write Once, Run Everywhere
  4. 4. 4© 2012-14 SirionLabs Private Limited. Requirement XYZ Requirement PQR Write Once, Run Everywhere Requirement ABC Requirement ABC Requirement PQR Requirement XYZ Write Once, Run Once Write Once, Run Everywhere Let’s code Again more code Tired of writing it again Let me plan and code Oh! I can reuse the previous code Ah! This is already taken care of
  5. 5. 5© 2012-14 SirionLabs Private Limited. Write Once, Run Everywhere Independent UI Framework • JSON Dependent UI with no server side rendering (Avoid php, jsp etc. for HTML generation) and independent of the technology used at back-end. Create Generic UI Components • Write UI code with a vision to use the same code for future usage. Assume that all the things that can change will change.
  6. 6. 6© 2012-14 SirionLabs Private Limited. ` How We Achieved
  7. 7. 7© 2012-14 SirionLabs Private Limited. JSON Based Field Population • Field type, validations, data model, specific properties are there in JSON Custom Html Tags Using Angularjs Directives • For repetitive fields like data tables with custom needs and for repetitive groups like dependent dropdowns, angularjs directives were used. Solution: Specific Handling For Complex UI Components
  8. 8. 8© 2012-14 SirionLabs Private Limited. Demo Image: Specific Handling For Complex UI Components
  9. 9. 9© 2012-14 SirionLabs Private Limited. • Directive for Tables Demo Code: Specific Handling For Complex UI Components
  10. 10. 10© 2012-14 SirionLabs Private Limited. Explanation :Specific Handling For Complex UI Components How these tables are getting created • HTML is specifying the component we need to pick (this is also conditional, depending on the parent field) • myTable directive picks up the options, layout url and layout data url based on the JSON and draw the table accordingly. • Events are also handled inside the directive at element level (no global selectors)
  11. 11. 11© 2012-14 SirionLabs Private Limited. Solution: Data Binding For UI Element Angularjs two-way Data Binding
  12. 12. 12© 2012-14 SirionLabs Private Limited. Dynamic Template Generation Based On Layout JSON Solution: Multiple Templates For Different Views Every UI component is treated as a field. Each field’s information lies in JSON: • Components like tabs, tab-content, tables, buttons, popups, text input, text area, select etc. are all fields. • Field attributes like editable/non-editable, validations, data-source etc. are contained in JSON.
  13. 13. 13© 2012-14 SirionLabs Private Limited. JSON Higher Order DOM Generator DOM Generator DOM HTML Template free DOM Generation Layout Info (from JSON) Data Binding Auto Update Based on values in DOM
  14. 14. 14© 2012-14 SirionLabs Private Limited. JSON Driven Template For Different Views
  15. 15. 15© 2012-14 SirionLabs Private Limited. Demo Explained: JSON Driven Template For Different Views How is JSON Creating the layout • Hierarchical structure of JSON is specifying the box structure of HTML • Type tabs specifies that a tab is needed • Next, type basic indicates the form type layout then type borderbox is asking to draw a box and at further level fields like input, dynamic table are inserted based on the type specified in JSON. • Each field has a name associated with it which binds that field to data.

×