SlideShare a Scribd company logo

The Principle of Hybrid App.

The Principle of Hybrid App. This slide is shown by musart in GTUG(Google Technology User Group) seoul 6th Seminar.

1 of 44
The Principle of
  Hybrid App.
     @musart
The solutions is Hybrid App...
What is Hybrid App.?




       ?

                       : http://www.phonegap.com/
The type of Hybrid App.


• Run-time Hybrid App.
 • phonegap
 • appspresso
• Build-time Hybrid App.
 • titanium
Build-time vs. Run-time

JavaScript           JavaScript, CSS, html




     App.             WebView
    Graphic           Graphic
    Context           Context
Build-time vs. Run-time

       JavaScript           JavaScript, CSS, html


Convert JS to Java, Obj-C
     Package App.


             App.            WebView
            Graphic          Graphic
            Context          Context
Ad

Recommended

Tame Accidental Complexity with Ruby and MongoMapper
Tame Accidental Complexity with Ruby and MongoMapperTame Accidental Complexity with Ruby and MongoMapper
Tame Accidental Complexity with Ruby and MongoMapperGiordano Scalzo
 
Windows 8 Training Fundamental - 1
Windows 8 Training Fundamental - 1Windows 8 Training Fundamental - 1
Windows 8 Training Fundamental - 1Kevin Octavian
 
Morphia, Spring Data & Co.
Morphia, Spring Data & Co.Morphia, Spring Data & Co.
Morphia, Spring Data & Co.Tobias Trelle
 
Paintfree Object-Document Mapping for MongoDB by Philipp Krenn
Paintfree Object-Document Mapping for MongoDB by Philipp KrennPaintfree Object-Document Mapping for MongoDB by Philipp Krenn
Paintfree Object-Document Mapping for MongoDB by Philipp KrennJavaDayUA
 

More Related Content

What's hot

Symfony2 from the Trenches
Symfony2 from the TrenchesSymfony2 from the Trenches
Symfony2 from the TrenchesJonathan Wage
 
Hi5 Opensocial Code Lab Presentation
Hi5 Opensocial Code Lab PresentationHi5 Opensocial Code Lab Presentation
Hi5 Opensocial Code Lab Presentationplindner
 
Symfony Day 2010 Doctrine MongoDB ODM
Symfony Day 2010 Doctrine MongoDB ODMSymfony Day 2010 Doctrine MongoDB ODM
Symfony Day 2010 Doctrine MongoDB ODMJonathan Wage
 
Doctrine MongoDB Object Document Mapper
Doctrine MongoDB Object Document MapperDoctrine MongoDB Object Document Mapper
Doctrine MongoDB Object Document MapperJonathan Wage
 
4시간만에 따라해보는 Windows 10 앱 개발 샘플코드
4시간만에 따라해보는 Windows 10 앱 개발 샘플코드4시간만에 따라해보는 Windows 10 앱 개발 샘플코드
4시간만에 따라해보는 Windows 10 앱 개발 샘플코드영욱 김
 
Java Persistence Frameworks for MongoDB
Java Persistence Frameworks for MongoDBJava Persistence Frameworks for MongoDB
Java Persistence Frameworks for MongoDBMongoDB
 
What's new in iOS 7
What's new in iOS 7What's new in iOS 7
What's new in iOS 7barcelonaio
 
Dominando o Data Binding no Android
Dominando o Data Binding no AndroidDominando o Data Binding no Android
Dominando o Data Binding no AndroidNelson Glauber Leal
 
MongoDB .local Munich 2019: New Encryption Capabilities in MongoDB 4.2: A Dee...
MongoDB .local Munich 2019: New Encryption Capabilities in MongoDB 4.2: A Dee...MongoDB .local Munich 2019: New Encryption Capabilities in MongoDB 4.2: A Dee...
MongoDB .local Munich 2019: New Encryption Capabilities in MongoDB 4.2: A Dee...MongoDB
 
Dominando o Data Binding no Android
Dominando o Data Binding no AndroidDominando o Data Binding no Android
Dominando o Data Binding no AndroidNelson Glauber Leal
 
How Signpost uses MongoDB for Tracking and Analytics
How Signpost uses MongoDB for Tracking and AnalyticsHow Signpost uses MongoDB for Tracking and Analytics
How Signpost uses MongoDB for Tracking and Analyticsmattinsler
 
ZendCon2010 Doctrine MongoDB ODM
ZendCon2010 Doctrine MongoDB ODMZendCon2010 Doctrine MongoDB ODM
ZendCon2010 Doctrine MongoDB ODMJonathan Wage
 
Using Mongoid with Ruby on Rails
Using Mongoid with Ruby on RailsUsing Mongoid with Ruby on Rails
Using Mongoid with Ruby on RailsNicholas Altobelli
 
[MongoDB.local Bengaluru 2018] Just in Time Validation with JSON Schema
[MongoDB.local Bengaluru 2018] Just in Time Validation with JSON Schema[MongoDB.local Bengaluru 2018] Just in Time Validation with JSON Schema
[MongoDB.local Bengaluru 2018] Just in Time Validation with JSON SchemaMongoDB
 
The Ring programming language version 1.8 book - Part 49 of 202
The Ring programming language version 1.8 book - Part 49 of 202The Ring programming language version 1.8 book - Part 49 of 202
The Ring programming language version 1.8 book - Part 49 of 202Mahmoud Samir Fayed
 
"Android Data Binding в массы" Михаил Анохин
"Android Data Binding в массы" Михаил Анохин"Android Data Binding в массы" Михаил Анохин
"Android Data Binding в массы" Михаил АнохинFwdays
 
Михаил Анохин "Data binding 2.0"
Михаил Анохин "Data binding 2.0"Михаил Анохин "Data binding 2.0"
Михаил Анохин "Data binding 2.0"Fwdays
 
WaveEngine 2D components
WaveEngine 2D componentsWaveEngine 2D components
WaveEngine 2D componentswaveengineteam
 
MongoDB .local Munich 2019: Tips and Tricks++ for Querying and Indexing MongoDB
MongoDB .local Munich 2019: Tips and Tricks++ for Querying and Indexing MongoDBMongoDB .local Munich 2019: Tips and Tricks++ for Querying and Indexing MongoDB
MongoDB .local Munich 2019: Tips and Tricks++ for Querying and Indexing MongoDBMongoDB
 

What's hot (20)

Symfony2 from the Trenches
Symfony2 from the TrenchesSymfony2 from the Trenches
Symfony2 from the Trenches
 
Hi5 Opensocial Code Lab Presentation
Hi5 Opensocial Code Lab PresentationHi5 Opensocial Code Lab Presentation
Hi5 Opensocial Code Lab Presentation
 
Symfony Day 2010 Doctrine MongoDB ODM
Symfony Day 2010 Doctrine MongoDB ODMSymfony Day 2010 Doctrine MongoDB ODM
Symfony Day 2010 Doctrine MongoDB ODM
 
Doctrine MongoDB Object Document Mapper
Doctrine MongoDB Object Document MapperDoctrine MongoDB Object Document Mapper
Doctrine MongoDB Object Document Mapper
 
4시간만에 따라해보는 Windows 10 앱 개발 샘플코드
4시간만에 따라해보는 Windows 10 앱 개발 샘플코드4시간만에 따라해보는 Windows 10 앱 개발 샘플코드
4시간만에 따라해보는 Windows 10 앱 개발 샘플코드
 
Java Persistence Frameworks for MongoDB
Java Persistence Frameworks for MongoDBJava Persistence Frameworks for MongoDB
Java Persistence Frameworks for MongoDB
 
What's new in iOS 7
What's new in iOS 7What's new in iOS 7
What's new in iOS 7
 
Dominando o Data Binding no Android
Dominando o Data Binding no AndroidDominando o Data Binding no Android
Dominando o Data Binding no Android
 
ActiveRecord vs Mongoid
ActiveRecord vs MongoidActiveRecord vs Mongoid
ActiveRecord vs Mongoid
 
MongoDB .local Munich 2019: New Encryption Capabilities in MongoDB 4.2: A Dee...
MongoDB .local Munich 2019: New Encryption Capabilities in MongoDB 4.2: A Dee...MongoDB .local Munich 2019: New Encryption Capabilities in MongoDB 4.2: A Dee...
MongoDB .local Munich 2019: New Encryption Capabilities in MongoDB 4.2: A Dee...
 
Dominando o Data Binding no Android
Dominando o Data Binding no AndroidDominando o Data Binding no Android
Dominando o Data Binding no Android
 
How Signpost uses MongoDB for Tracking and Analytics
How Signpost uses MongoDB for Tracking and AnalyticsHow Signpost uses MongoDB for Tracking and Analytics
How Signpost uses MongoDB for Tracking and Analytics
 
ZendCon2010 Doctrine MongoDB ODM
ZendCon2010 Doctrine MongoDB ODMZendCon2010 Doctrine MongoDB ODM
ZendCon2010 Doctrine MongoDB ODM
 
Using Mongoid with Ruby on Rails
Using Mongoid with Ruby on RailsUsing Mongoid with Ruby on Rails
Using Mongoid with Ruby on Rails
 
[MongoDB.local Bengaluru 2018] Just in Time Validation with JSON Schema
[MongoDB.local Bengaluru 2018] Just in Time Validation with JSON Schema[MongoDB.local Bengaluru 2018] Just in Time Validation with JSON Schema
[MongoDB.local Bengaluru 2018] Just in Time Validation with JSON Schema
 
The Ring programming language version 1.8 book - Part 49 of 202
The Ring programming language version 1.8 book - Part 49 of 202The Ring programming language version 1.8 book - Part 49 of 202
The Ring programming language version 1.8 book - Part 49 of 202
 
"Android Data Binding в массы" Михаил Анохин
"Android Data Binding в массы" Михаил Анохин"Android Data Binding в массы" Михаил Анохин
"Android Data Binding в массы" Михаил Анохин
 
Михаил Анохин "Data binding 2.0"
Михаил Анохин "Data binding 2.0"Михаил Анохин "Data binding 2.0"
Михаил Анохин "Data binding 2.0"
 
WaveEngine 2D components
WaveEngine 2D componentsWaveEngine 2D components
WaveEngine 2D components
 
MongoDB .local Munich 2019: Tips and Tricks++ for Querying and Indexing MongoDB
MongoDB .local Munich 2019: Tips and Tricks++ for Querying and Indexing MongoDBMongoDB .local Munich 2019: Tips and Tricks++ for Querying and Indexing MongoDB
MongoDB .local Munich 2019: Tips and Tricks++ for Querying and Indexing MongoDB
 

Similar to The Principle of Hybrid App.

CouchDB on Android
CouchDB on AndroidCouchDB on Android
CouchDB on AndroidSven Haiges
 
Google
GoogleGoogle
Googlesoon
 
After max+phonegap
After max+phonegapAfter max+phonegap
After max+phonegapyangdj
 
混搭移动开发:PhoneGap+JQurey+Dreamweaver
混搭移动开发:PhoneGap+JQurey+Dreamweaver混搭移动开发:PhoneGap+JQurey+Dreamweaver
混搭移动开发:PhoneGap+JQurey+Dreamweaveryangdj
 
GDI Seattle - Intro to JavaScript Class 4
GDI Seattle - Intro to JavaScript Class 4GDI Seattle - Intro to JavaScript Class 4
GDI Seattle - Intro to JavaScript Class 4Heather Rock
 
Hi5 opensocial-code-lab-presentation-1203814696810018-3
Hi5 opensocial-code-lab-presentation-1203814696810018-3Hi5 opensocial-code-lab-presentation-1203814696810018-3
Hi5 opensocial-code-lab-presentation-1203814696810018-3Kunal Mittal
 
IndexedDB and Push Notifications in Progressive Web Apps
IndexedDB and Push Notifications in Progressive Web AppsIndexedDB and Push Notifications in Progressive Web Apps
IndexedDB and Push Notifications in Progressive Web AppsAdégòkè Obasá
 
Android dev toolbox
Android dev toolboxAndroid dev toolbox
Android dev toolboxShem Magnezi
 
Taming that client side mess with Backbone.js
Taming that client side mess with Backbone.jsTaming that client side mess with Backbone.js
Taming that client side mess with Backbone.jsJarod Ferguson
 
Building complex User Interfaces with Sitecore and React
Building complex User Interfaces with Sitecore and ReactBuilding complex User Interfaces with Sitecore and React
Building complex User Interfaces with Sitecore and ReactJonne Kats
 

Similar to The Principle of Hybrid App. (20)

CouchDB on Android
CouchDB on AndroidCouchDB on Android
CouchDB on Android
 
Html5 For Jjugccc2009fall
Html5 For Jjugccc2009fallHtml5 For Jjugccc2009fall
Html5 For Jjugccc2009fall
 
Google
GoogleGoogle
Google
 
After max+phonegap
After max+phonegapAfter max+phonegap
After max+phonegap
 
混搭移动开发:PhoneGap+JQurey+Dreamweaver
混搭移动开发:PhoneGap+JQurey+Dreamweaver混搭移动开发:PhoneGap+JQurey+Dreamweaver
混搭移动开发:PhoneGap+JQurey+Dreamweaver
 
GDI Seattle - Intro to JavaScript Class 4
GDI Seattle - Intro to JavaScript Class 4GDI Seattle - Intro to JavaScript Class 4
GDI Seattle - Intro to JavaScript Class 4
 
Hi5 opensocial-code-lab-presentation-1203814696810018-3
Hi5 opensocial-code-lab-presentation-1203814696810018-3Hi5 opensocial-code-lab-presentation-1203814696810018-3
Hi5 opensocial-code-lab-presentation-1203814696810018-3
 
IndexedDB and Push Notifications in Progressive Web Apps
IndexedDB and Push Notifications in Progressive Web AppsIndexedDB and Push Notifications in Progressive Web Apps
IndexedDB and Push Notifications in Progressive Web Apps
 
Android dev toolbox
Android dev toolboxAndroid dev toolbox
Android dev toolbox
 
jQuery secrets
jQuery secretsjQuery secrets
jQuery secrets
 
Ajax chap 4
Ajax chap 4Ajax chap 4
Ajax chap 4
 
Taming that client side mess with Backbone.js
Taming that client side mess with Backbone.jsTaming that client side mess with Backbone.js
Taming that client side mess with Backbone.js
 
Scala on Your Phone
Scala on Your PhoneScala on Your Phone
Scala on Your Phone
 
Vaadin7
Vaadin7Vaadin7
Vaadin7
 
Clean Javascript
Clean JavascriptClean Javascript
Clean Javascript
 
Serverless
ServerlessServerless
Serverless
 
Building complex User Interfaces with Sitecore and React
Building complex User Interfaces with Sitecore and ReactBuilding complex User Interfaces with Sitecore and React
Building complex User Interfaces with Sitecore and React
 
Html5 Overview
Html5 OverviewHtml5 Overview
Html5 Overview
 
jQuery
jQueryjQuery
jQuery
 
Java script -23jan2015
Java script -23jan2015Java script -23jan2015
Java script -23jan2015
 

Recently uploaded

"How we created an SRE team in Temabit as a part of FOZZY Group in conditions...
"How we created an SRE team in Temabit as a part of FOZZY Group in conditions..."How we created an SRE team in Temabit as a part of FOZZY Group in conditions...
"How we created an SRE team in Temabit as a part of FOZZY Group in conditions...Fwdays
 
Dynamical systems simulation in Python for science and engineering
Dynamical systems simulation in Python for science and engineeringDynamical systems simulation in Python for science and engineering
Dynamical systems simulation in Python for science and engineeringMassimo Talia
 
LF Energy Webinar: Introduction to TROLIE
LF Energy Webinar: Introduction to TROLIELF Energy Webinar: Introduction to TROLIE
LF Energy Webinar: Introduction to TROLIEDanBrown980551
 
Bit N Build Poland
Bit N Build PolandBit N Build Poland
Bit N Build PolandGDSC PJATK
 
Early Tech Adoption: Foolish or Pragmatic? - 17th ISACA South Florida WOW Con...
Early Tech Adoption: Foolish or Pragmatic? - 17th ISACA South Florida WOW Con...Early Tech Adoption: Foolish or Pragmatic? - 17th ISACA South Florida WOW Con...
Early Tech Adoption: Foolish or Pragmatic? - 17th ISACA South Florida WOW Con...Adrian Sanabria
 
Relationship Counselling: From Disjointed Features to Product-First Thinking ...
Relationship Counselling: From Disjointed Features to Product-First Thinking ...Relationship Counselling: From Disjointed Features to Product-First Thinking ...
Relationship Counselling: From Disjointed Features to Product-First Thinking ...Product School
 
Dev Dives: Leverage APIs and Gen AI to power automations for RPA and software...
Dev Dives: Leverage APIs and Gen AI to power automations for RPA and software...Dev Dives: Leverage APIs and Gen AI to power automations for RPA and software...
Dev Dives: Leverage APIs and Gen AI to power automations for RPA and software...UiPathCommunity
 
Synergy in Leadership and Product Excellence: A Blueprint for Growth by CPO, ...
Synergy in Leadership and Product Excellence: A Blueprint for Growth by CPO, ...Synergy in Leadership and Product Excellence: A Blueprint for Growth by CPO, ...
Synergy in Leadership and Product Excellence: A Blueprint for Growth by CPO, ...Product School
 
Building Products That Think- Bhaskaran Srinivasan & Ashish Gupta
Building Products That Think- Bhaskaran Srinivasan & Ashish GuptaBuilding Products That Think- Bhaskaran Srinivasan & Ashish Gupta
Building Products That Think- Bhaskaran Srinivasan & Ashish GuptaISPMAIndia
 
"Testing of Helm Charts or There and Back Again", Yura Rochniak
"Testing of Helm Charts or There and Back Again", Yura Rochniak"Testing of Helm Charts or There and Back Again", Yura Rochniak
"Testing of Helm Charts or There and Back Again", Yura RochniakFwdays
 
Introduction to Multimodal LLMs with LLaVA
Introduction to Multimodal LLMs with LLaVAIntroduction to Multimodal LLMs with LLaVA
Introduction to Multimodal LLMs with LLaVARobert McDermott
 
The Future of Product, by Founder & CEO, Product School
The Future of Product, by Founder & CEO, Product SchoolThe Future of Product, by Founder & CEO, Product School
The Future of Product, by Founder & CEO, Product SchoolProduct School
 
Apex Replay Debugger and Salesforce Platform Events.pptx
Apex Replay Debugger and Salesforce Platform Events.pptxApex Replay Debugger and Salesforce Platform Events.pptx
Apex Replay Debugger and Salesforce Platform Events.pptxmohayyudin7826
 
"Journey of Aspiration: Unveiling the Path to Becoming a Technocrat and Entre...
"Journey of Aspiration: Unveiling the Path to Becoming a Technocrat and Entre..."Journey of Aspiration: Unveiling the Path to Becoming a Technocrat and Entre...
"Journey of Aspiration: Unveiling the Path to Becoming a Technocrat and Entre...shaiyuvasv
 
"Running Open-Source LLM models on Kubernetes", Volodymyr Tsap
"Running Open-Source LLM models on Kubernetes",  Volodymyr Tsap"Running Open-Source LLM models on Kubernetes",  Volodymyr Tsap
"Running Open-Source LLM models on Kubernetes", Volodymyr TsapFwdays
 
Importance of magazines in education ppt
Importance of magazines in education pptImportance of magazines in education ppt
Importance of magazines in education pptsafnarafeek2002
 
Leveraging SLF4j for Effective Logging in IBM App Connect Enterprise.docx
Leveraging SLF4j for Effective Logging in IBM App Connect Enterprise.docxLeveraging SLF4j for Effective Logging in IBM App Connect Enterprise.docx
Leveraging SLF4j for Effective Logging in IBM App Connect Enterprise.docxVotarikari Shravan
 
Automate Your Master Data Processes for Shared Service Center Excellence
Automate Your Master Data Processes for Shared Service Center ExcellenceAutomate Your Master Data Processes for Shared Service Center Excellence
Automate Your Master Data Processes for Shared Service Center ExcellencePrecisely
 
AI Act & Standardization: UNINFO involvement
AI Act & Standardization: UNINFO involvementAI Act & Standardization: UNINFO involvement
AI Act & Standardization: UNINFO involvementMimmo Squillace
 
Confoo 2024 Gettings started with OpenAI and data science
Confoo 2024 Gettings started with OpenAI and data scienceConfoo 2024 Gettings started with OpenAI and data science
Confoo 2024 Gettings started with OpenAI and data scienceSusan Ibach
 

Recently uploaded (20)

"How we created an SRE team in Temabit as a part of FOZZY Group in conditions...
"How we created an SRE team in Temabit as a part of FOZZY Group in conditions..."How we created an SRE team in Temabit as a part of FOZZY Group in conditions...
"How we created an SRE team in Temabit as a part of FOZZY Group in conditions...
 
Dynamical systems simulation in Python for science and engineering
Dynamical systems simulation in Python for science and engineeringDynamical systems simulation in Python for science and engineering
Dynamical systems simulation in Python for science and engineering
 
LF Energy Webinar: Introduction to TROLIE
LF Energy Webinar: Introduction to TROLIELF Energy Webinar: Introduction to TROLIE
LF Energy Webinar: Introduction to TROLIE
 
Bit N Build Poland
Bit N Build PolandBit N Build Poland
Bit N Build Poland
 
Early Tech Adoption: Foolish or Pragmatic? - 17th ISACA South Florida WOW Con...
Early Tech Adoption: Foolish or Pragmatic? - 17th ISACA South Florida WOW Con...Early Tech Adoption: Foolish or Pragmatic? - 17th ISACA South Florida WOW Con...
Early Tech Adoption: Foolish or Pragmatic? - 17th ISACA South Florida WOW Con...
 
Relationship Counselling: From Disjointed Features to Product-First Thinking ...
Relationship Counselling: From Disjointed Features to Product-First Thinking ...Relationship Counselling: From Disjointed Features to Product-First Thinking ...
Relationship Counselling: From Disjointed Features to Product-First Thinking ...
 
Dev Dives: Leverage APIs and Gen AI to power automations for RPA and software...
Dev Dives: Leverage APIs and Gen AI to power automations for RPA and software...Dev Dives: Leverage APIs and Gen AI to power automations for RPA and software...
Dev Dives: Leverage APIs and Gen AI to power automations for RPA and software...
 
Synergy in Leadership and Product Excellence: A Blueprint for Growth by CPO, ...
Synergy in Leadership and Product Excellence: A Blueprint for Growth by CPO, ...Synergy in Leadership and Product Excellence: A Blueprint for Growth by CPO, ...
Synergy in Leadership and Product Excellence: A Blueprint for Growth by CPO, ...
 
Building Products That Think- Bhaskaran Srinivasan & Ashish Gupta
Building Products That Think- Bhaskaran Srinivasan & Ashish GuptaBuilding Products That Think- Bhaskaran Srinivasan & Ashish Gupta
Building Products That Think- Bhaskaran Srinivasan & Ashish Gupta
 
"Testing of Helm Charts or There and Back Again", Yura Rochniak
"Testing of Helm Charts or There and Back Again", Yura Rochniak"Testing of Helm Charts or There and Back Again", Yura Rochniak
"Testing of Helm Charts or There and Back Again", Yura Rochniak
 
Introduction to Multimodal LLMs with LLaVA
Introduction to Multimodal LLMs with LLaVAIntroduction to Multimodal LLMs with LLaVA
Introduction to Multimodal LLMs with LLaVA
 
The Future of Product, by Founder & CEO, Product School
The Future of Product, by Founder & CEO, Product SchoolThe Future of Product, by Founder & CEO, Product School
The Future of Product, by Founder & CEO, Product School
 
Apex Replay Debugger and Salesforce Platform Events.pptx
Apex Replay Debugger and Salesforce Platform Events.pptxApex Replay Debugger and Salesforce Platform Events.pptx
Apex Replay Debugger and Salesforce Platform Events.pptx
 
"Journey of Aspiration: Unveiling the Path to Becoming a Technocrat and Entre...
"Journey of Aspiration: Unveiling the Path to Becoming a Technocrat and Entre..."Journey of Aspiration: Unveiling the Path to Becoming a Technocrat and Entre...
"Journey of Aspiration: Unveiling the Path to Becoming a Technocrat and Entre...
 
"Running Open-Source LLM models on Kubernetes", Volodymyr Tsap
"Running Open-Source LLM models on Kubernetes",  Volodymyr Tsap"Running Open-Source LLM models on Kubernetes",  Volodymyr Tsap
"Running Open-Source LLM models on Kubernetes", Volodymyr Tsap
 
Importance of magazines in education ppt
Importance of magazines in education pptImportance of magazines in education ppt
Importance of magazines in education ppt
 
Leveraging SLF4j for Effective Logging in IBM App Connect Enterprise.docx
Leveraging SLF4j for Effective Logging in IBM App Connect Enterprise.docxLeveraging SLF4j for Effective Logging in IBM App Connect Enterprise.docx
Leveraging SLF4j for Effective Logging in IBM App Connect Enterprise.docx
 
Automate Your Master Data Processes for Shared Service Center Excellence
Automate Your Master Data Processes for Shared Service Center ExcellenceAutomate Your Master Data Processes for Shared Service Center Excellence
Automate Your Master Data Processes for Shared Service Center Excellence
 
AI Act & Standardization: UNINFO involvement
AI Act & Standardization: UNINFO involvementAI Act & Standardization: UNINFO involvement
AI Act & Standardization: UNINFO involvement
 
Confoo 2024 Gettings started with OpenAI and data science
Confoo 2024 Gettings started with OpenAI and data scienceConfoo 2024 Gettings started with OpenAI and data science
Confoo 2024 Gettings started with OpenAI and data science
 

The Principle of Hybrid App.

  • 1. The Principle of Hybrid App. @musart
  • 2. The solutions is Hybrid App...
  • 3. What is Hybrid App.? ? : http://www.phonegap.com/
  • 4. The type of Hybrid App. • Run-time Hybrid App. • phonegap • appspresso • Build-time Hybrid App. • titanium
  • 5. Build-time vs. Run-time JavaScript JavaScript, CSS, html App. WebView Graphic Graphic Context Context
  • 6. Build-time vs. Run-time JavaScript JavaScript, CSS, html Convert JS to Java, Obj-C Package App. App. WebView Graphic Graphic Context Context
  • 7. Build-time vs. Run-time JavaScript JavaScript, CSS, html Convert JS to Java, Obj-C Connect JS and Java, Obj-C Package App. Package App. App. WebView Graphic Graphic Context Context
  • 8. Magic Point in Android
  • 9. Magic Point in Android <!DOCTYPE html> <head> <script> function changeText() { document.getElementById(‘myDiv’).innerHTML = MyHybrid.hello(); } </script> </head> <body> <b id=‘myDiv’>Hello world.</b><br/> <input type=‘button’ onclick=‘changeText()’ value=‘Change Text’/> </body> </html> public class HybirdApp extends Activity { public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); WebView webView = findResourceById(R.id.WebView); webView.loadUrl(“file:///android_asset/www/index.html”); webView.getSettings().setJavaScriptEnabled(true); webView.addJavascriptInterface(new MyHybrid(), “MyHybrid”); } class MyHybrid { public String hello() { return “Hello hybrid App.”; } } }
  • 10. Magic Point in Android <!DOCTYPE html> <head> <script> function changeText() { document.getElementById(‘myDiv’).innerHTML = MyHybrid.hello(); } </script> </head> <body> <b id=‘myDiv’>Hello world.</b><br/> <input type=‘button’ onclick=‘changeText()’ value=‘Change Text’/> </body> </html> public class HybirdApp extends Activity { public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); WebView webView = findResourceById(R.id.WebView); webView.loadUrl(“file:///android_asset/www/index.html”); webView.getSettings().setJavaScriptEnabled(true); webView.addJavascriptInterface(new MyHybrid(), “MyHybrid”); } class MyHybrid { public String hello() { return “Hello hybrid App.”; } } }
  • 11. Magic Point in Android <!DOCTYPE html> <head> <script> function changeText() { document.getElementById(‘myDiv’).innerHTML = MyHybrid.hello(); } </script> </head> <body> <b id=‘myDiv’>Hello world.</b><br/> <input type=‘button’ onclick=‘changeText()’ value=‘Change Text’/> </body> </html> public class HybirdApp extends Activity { public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); WebView webView = findResourceById(R.id.WebView); webView.loadUrl(“file:///android_asset/www/index.html”); webView.getSettings().setJavaScriptEnabled(true); webView.addJavascriptInterface(new MyHybrid(), “MyHybrid”); } class MyHybrid { public String hello() { return “Hello hybrid App.”; } } }
  • 12. 1. parameter type • Which type of parameter in JavaScript is suitable for Java? • numeric, boolean, string • object, array, function
  • 13. 1. parameter type <script> function changeText() { var str = MyHybrid.setInt(20) + “<br/>”; str += MyHybrid.setFloat(20.5) + “<br/>”; str += MyHybrid.setBoolean(true) + “<br/>”; str += MyHybrid.setString(“hello”) + “<br/>”; document.getElementById(‘paramTest’).innerHTML = str; } </script> <body> <div id=‘paramTest’></div> </body> class MyHybrid { public String setInt(int data) { return “setInt:” + Integer.toString(data); } public String setFloat(float data) { return “setFloat:” + Float.toString(data); } public String setBoolean(boolean data) { return “setBoolean:” + Boolean.toString(data); } public String setString(String data) { return “setString:” + data; } }
  • 14. 1. parameter type <script> function changeText() { var str = MyHybrid.setInt(20) + “<br/>”; str += MyHybrid.setFloat(20.5) + “<br/>”; str += MyHybrid.setBoolean(true) + “<br/>”; str += MyHybrid.setString(“hello”) + “<br/>”; document.getElementById(‘paramTest’).innerHTML = str; } </script> <body> <div id=‘paramTest’></div> </body> class MyHybrid { public String setInt(int data) { return “setInt:” + Integer.toString(data); } public String setFloat(float data) { return “setFloat:” + Float.toString(data); } public String setBoolean(boolean data) { return “setBoolean:” + Boolean.toString(data); } public String setString(String data) { return “setString:” + data; } }
  • 15. 1. parameter type <script> function changeText() { var str = MyHybrid.setObject({}) + “<br/>”; str += MyHybrid.setArray([]) + “<br/>”; str += MyHybrid.setFunction(func1) + “<br/>”; document.getElementById(‘paramTest’).innerHTML = str; } function func1() { var value1=0; } </script> <body> <div id=‘paramTest’></div> </body> class MyHybrid { public String setObject(String data) { return “setObject:” + data; } public String setArray(String data) { return “setArray:” + data; } public String setFunction(String data) { return “setFunction:” + data; } }
  • 16. 1. parameter type <script> function changeText() { var str = MyHybrid.setObject({}) + “<br/>”; str += MyHybrid.setArray([]) + “<br/>”; str += MyHybrid.setFunction(func1) + “<br/>”; document.getElementById(‘paramTest’).innerHTML = str; } function func1() { var value1=0; } </script> <body> <div id=‘paramTest’></div> </body> class MyHybrid { public String setObject(String data) { return “setObject:” + data; } public String setArray(String data) { return “setArray:” + data; } public String setFunction(String data) { return “setFunction:” + data; } }
  • 17. 1. parameter type <script> function changeText() { var str = MyHybrid.setObject( JSON.stringify({}) ) + “<br/>”; str += MyHybrid.setArray( JSON.stringify([]) ) + “<br/>”; str += MyHybrid.setFunction( func1.toString() ) + “<br/>”; document.getElementById(‘paramTest’).innerHTML = str; } function func1() { var value1=0; } </script> <body> <div id=‘paramTest’></div> </body> class MyHybrid { public String setObject(String data) { return “setObject:” + data; } public String setArray(String data) { return “setArray:” + data; } public String setFunction(String data) { return “setFunction:” + data; } }
  • 18. 1. parameter type <script> function changeText() { var str = MyHybrid.setObject( JSON.stringify({}) ) + “<br/>”; str += MyHybrid.setArray( JSON.stringify([]) ) + “<br/>”; str += MyHybrid.setFunction( func1.toString() ) + “<br/>”; document.getElementById(‘paramTest’).innerHTML = str; } function func1() { var value1=0; } </script> <body> <div id=‘paramTest’></div> </body> class MyHybrid { public String setObject(String data) { return “setObject:” + data; } public String setArray(String data) { return “setArray:” + data; } public String setFunction(String data) { return “setFunction:” + data; } }
  • 19. 2. asynchronous function in Java • If JavaScript is stuck ? • OMG!! • ANR!!
  • 20. 2. asynchronous function in Java <script> var start = new Date().getTime(); setInterval(function() { document.getElementById(‘tTest’).innerHTML+=(new Date().getTime()-start)+“msec<br/>”; }, 1000); function changeText() { document.getElementById(‘tTest’).innerHTML += “call MyHybrid.hang()<br/>”; MyHybrid.hang(5); document.getElementById(‘tTest’).innerHTML += “hang 5secs<br/>”; } </script> <body> <div id=‘tTest’></div> <input type=‘button’ onclick=‘changeText()’ value=‘Change Text’/> </body> class MyHybrid { public void hang(int time) { try { Thread.sleep(time*1000); } catch (InterruptedException e) { e.printStackTrace(); } } }
  • 21. 2. asynchronous function in Java <script> var start = new Date().getTime(); setInterval(function() { document.getElementById(‘tTest’).innerHTML+=(new Date().getTime()-start)+“msec<br/>”; }, 1000); function changeText() { document.getElementById(‘tTest’).innerHTML += “call MyHybrid.hang()<br/>”; MyHybrid.hang(5); document.getElementById(‘tTest’).innerHTML += “hang 5secs<br/>”; } </script> <body> <div id=‘tTest’></div> <input type=‘button’ onclick=‘changeText()’ value=‘Change Text’/> </body> class MyHybrid { public void hang(int time) { try { Thread.sleep(time*1000); } catch (InterruptedException e) { e.printStackTrace(); } } }
  • 22. 2. asynchronous function in Java <script> var start = new Date().getTime(); setInterval(function() { document.getElementById(‘tTest’).innerHTML+=(new Date().getTime()-start)+“msec<br/>”; }, 1000); function changeText() { document.getElementById(‘tTest’).innerHTML += “call MyHybrid.asyncJob()<br/>”; MyHybrid.asyncJob(5); document.getElementById(‘tTest’).innerHTML += “hang 5secs<br/>”; } </script> <body> <div id=‘tTest’></div> <input type=‘button’ onclick=‘changeText()’ value=‘Change Text’/> </body> class MyHybrid { public void asyncJob(final int time) { Thread thread = new Thread(new Runnable() { public void run() { try { Thread.sleep(time*1000); } catch (InterruptedException e) { e.printStackTrace(); } } }); thread.start(); } }
  • 23. 2. asynchronous function in Java <script> var start = new Date().getTime(); setInterval(function() { document.getElementById(‘tTest’).innerHTML+=(new Date().getTime()-start)+“msec<br/>”; }, 1000); function changeText() { document.getElementById(‘tTest’).innerHTML += “call MyHybrid.asyncJob()<br/>”; MyHybrid.asyncJob(5); document.getElementById(‘tTest’).innerHTML += “hang 5secs<br/>”; } </script> <body> <div id=‘tTest’></div> <input type=‘button’ onclick=‘changeText()’ value=‘Change Text’/> </body> class MyHybrid { public void asyncJob(final int time) { Thread thread = new Thread(new Runnable() { public void run() { try { Thread.sleep(time*1000); } catch (InterruptedException e) { e.printStackTrace(); } } }); thread.start(); } }
  • 24. 3. return value & callback function • When functions are changed asynchronously, how to return results to the caller exactly?
  • 25. 3. return value & callback function <script> var start = new Date().getTime(); setInterval(function() { document.getElementById(‘tTest’).innerHTML+=(new Date().getTime()-start)+“msec<br/>”; }, 1000); function changeText() { document.getElementById(‘tTest’).innerHTML += “call MyHybrid.asyncJob()<br/>”; MyHybrid.asyncJob(5); document.getElementById(‘tTest’).innerHTML += “hang 5secs<br/>”; } </script> <body> <div id=‘tTest’></div> <input type=‘button’ onclick=‘changeText()’ value=‘Change Text’/> </body> class MyHybrid { public void asyncJob(final int time) { Thread thread = new Thread(new Runnable() { public void run() { try { Thread.sleep(time*1000); // how to return results? } catch (InterruptedException e) { e.printStackTrace(); } } }); thread.start(); } }
  • 26. 3. return value & callback function <script> var start = new Date().getTime(); setInterval(function() { document.getElementById(‘tTest’).innerHTML+=(new Date().getTime()-start)+“msec<br/>”; }, 1000); function changeText() { document.getElementById(‘tTest’).innerHTML += “call MyHybrid.asyncJob()<br/>”; MyHybrid.asyncJob(5); document.getElementById(‘tTest’).innerHTML += “hang 5secs<br/>”; } </script> <body> <div id=‘tTest’></div> <input type=‘button’ onclick=‘changeText()’ value=‘Change Text’/> </body> class MyHybrid { public void asyncJob(final int time) { Thread thread = new Thread(new Runnable() { public void run() { try { Thread.sleep(time*1000); // how to return results? } catch (InterruptedException e) { e.printStackTrace(); } } }); thread.start(); } }
  • 27. 3. return value & callback function <script> var start = new Date().getTime(); setInterval(function() { document.getElementById(‘tTest’).innerHTML+=(new Date().getTime()-start)+“msec<br/>”; }, 1000); function changeText() { document.getElementById(‘tTest’).innerHTML += “call MyHybrid.asyncJob()<br/>”; MyHybrid.asyncJob(5); document.getElementById(‘tTest’).innerHTML += “hang 5secs<br/>”; } </script> <body> <div id=‘tTest’></div> <input type=‘button’ onclick=‘changeText()’ value=‘Change Text’/> </body> class MyHybrid { public void asyncJob(final int time) { Thread thread = new Thread(new Runnable() { public void run() { try { Thread.sleep(time*1000); mWebView.loadUrl(“javascript:document.getElementById(‘tTest’).innerHTML += ”finish asyncJob()<br/>””); } catch (InterruptedException e) { e.printStackTrace(); } } }); thread.start(); }
  • 28. 3. return value & callback function <script> var start = new Date().getTime(); setInterval(function() { document.getElementById(‘tTest’).innerHTML+=(new Date().getTime()-start)+“msec<br/>”; }, 1000); function changeText() { document.getElementById(‘tTest’).innerHTML += “call MyHybrid.asyncJob()<br/>”; MyHybrid.asyncJob(5); document.getElementById(‘tTest’).innerHTML += “hang 5secs<br/>”; } </script> <body> <div id=‘tTest’></div> <input type=‘button’ onclick=‘changeText()’ value=‘Change Text’/> </body> class MyHybrid { public void asyncJob(final int time) { Thread thread = new Thread(new Runnable() { public void run() { try { Thread.sleep(time*1000); mWebView.loadUrl(“javascript:document.getElementById(‘tTest’).innerHTML += ”finish asyncJob()<br/>””); } catch (InterruptedException e) { e.printStackTrace(); } } }); thread.start(); }
  • 29. 3. return value & callback function <script> var start = new Date().getTime(); setInterval(function() { document.getElementById(‘tTest’).innerHTML+=(new Date().getTime()-start)+“msec<br/>”; }, 1000); function changeText() { document.getElementById(‘tTest’).innerHTML += “call MyHybrid.aFuncJob()<br/>”; MyHybrid.aFuncJob(asyncFunction.toString().match(/^s*functions+([^s(]+)/)[1], 5); document.getElementById(‘tTest’).innerHTML += “aFuncJob 5secs<br/>”; } function asyncFunction(str) { document.getElementById(‘tTest’).innerHTML += “asyncFunction:” + str + “<br/>”; } </script> <body> class MyHybrid { public String aFuncJob(final String strFunc, final int time) { Thread thread = new Thread(new Runnable() { public void run() { try { Thread.sleep(time*1000); mWebView.loadUrl(“javascript:” + strFunc + “(”finish aFuncJob()<br/>”)”); } catch (InterruptedException e) { e.printStackTrace(); } } }); thread.start(); } }
  • 30. 3. return value & callback function <script> var start = new Date().getTime(); setInterval(function() { document.getElementById(‘tTest’).innerHTML+=(new Date().getTime()-start)+“msec<br/>”; }, 1000); function changeText() { document.getElementById(‘tTest’).innerHTML += “call MyHybrid.aFuncJob()<br/>”; MyHybrid.aFuncJob(asyncFunction.toString().match(/^s*functions+([^s(]+)/)[1], 5); document.getElementById(‘tTest’).innerHTML += “aFuncJob 5secs<br/>”; } function asyncFunction(str) { document.getElementById(‘tTest’).innerHTML += “asyncFunction:” + str + “<br/>”; } </script> <body> class MyHybrid { public String aFuncJob(final String strFunc, final int time) { Thread thread = new Thread(new Runnable() { public void run() { try { Thread.sleep(time*1000); mWebView.loadUrl(“javascript:” + strFunc + “(”finish aFuncJob()<br/>”)”); } catch (InterruptedException e) { e.printStackTrace(); } } }); thread.start(); } }
  • 31. 4. anonymous callback function • We use anonymous callback functions in JavaScript, normally. setInterval(function() { alert(“hello”); }, 1000); • Let’s make it possible!
  • 32. 4. anonymous callback function <script> function changeText() { var str = MyHybrid.setFunction( func1.toString() ) + “<br/>”; str += MyHybrid.setFunction((function func2() {var value2=0;}).toString()) + “<br/>”; str += MyHybrid.setFunction((function() {var value3=0;}).toString()) + “<br/>”; document.getElementById(‘paramTest’).innerHTML = str; } function func1() { var value1=0; } </script> <body> <div id=‘paramTest’></div> </body> class MyHybrid { public String setFunction(String data) { return “setFunction:” + data; } }
  • 33. 4. anonymous callback function <script> function changeText() { var str = MyHybrid.setFunction( func1.toString() ) + “<br/>”; str += MyHybrid.setFunction((function func2() {var value2=0;}).toString()) + “<br/>”; str += MyHybrid.setFunction((function() {var value3=0;}).toString()) + “<br/>”; document.getElementById(‘paramTest’).innerHTML = str; } function func1() { var value1=0; } </script> <body> <div id=‘paramTest’></div> </body> class MyHybrid { public String setFunction(String data) { return “setFunction:” + data; } }
  • 34. 4. anonymous callback function <script> function changeText() { document.getElementById(‘tTest’).innerHTML += “call HybridFunc()<br/>”; HybridFunc(function(str) { document.getElementById(‘tTest’).innerHTML += “callbackFunc:” + str + “<br/>” }, 5); } function HybridFunc(cb, arg) { CbMgr.callCbFunc(cb, arg); } var CbMgr = {}; CbMgr.cbId = 0; CbMgr.cbs = {}; CbMgr.callCbFunc = function(func, arg) { var id = “CbMgr” + CbMgr.cbId++; if(!CbMgr.cbs[id]) { CbMgr.cbs[id] = func; MyHybrid.aFuncJobWithId(id, arg); } }; CbMgr.fireCbFunc = function(id, args) { if(CbMgr.cbs[id]) { CbMgr.cbs[id](args); delete CbMgr.cbs[id]; } }; </script> <body> <div id=‘tTest’></div> <input type=‘button’ onclick=‘changeText()’ value=‘Change Text’/> </body>
  • 35. 4. anonymous callback function <script> function changeText() { document.getElementById(‘tTest’).innerHTML += “call HybridFunc()<br/>”; HybridFunc(function(str) { document.getElementById(‘tTest’).innerHTML += “callbackFunc:” + str + “<br/>” }, 5); } function HybridFunc(cb, arg) { CbMgr.callCbFunc(cb, arg); } ... </script> public String aFuncJobWithId(final String strId, final int time) { Thread thread = new Thread(new Runnable() { public void run() { try { Thread.sleep(time*1000); mWebView.loadUrl(“javascript:CbMgr.fireCbFunc(”” + strId + “”, ”finish aFuncJobWithId()<br/>”)”); } catch (InterruptedException e) { e.printStackTrace(); } } }); thread.start(); }
  • 36. 4. anonymous callback function <script> function changeText() { document.getElementById(‘tTest’).innerHTML += “call HybridFunc()<br/>”; HybridFunc(function(str) { document.getElementById(‘tTest’).innerHTML += “callbackFunc:” + str + “<br/>” }, 5); } function HybridFunc(cb, arg) { CbMgr.callCbFunc(cb, arg); } ... </script> public String aFuncJobWithId(final String strId, final int time) { Thread thread = new Thread(new Runnable() { public void run() { try { Thread.sleep(time*1000); mWebView.loadUrl(“javascript:CbMgr.fireCbFunc(”” + strId + “”, ”finish aFuncJobWithId()<br/>”)”); } catch (InterruptedException e) { e.printStackTrace(); } } }); thread.start(); }
  • 37. To use generally <script src=”MyHybrid.js”></script> <script> function changeText() { document.getElementById(‘tTest’).innerHTML += “call HybridFunc()<br/>”; HybridFunc(function(str) { document.getElementById(‘tTest’).innerHTML += “callbackFunc:” + str + “<br/>” }, 5); HybridFunc(function(str) { alert(str); }, 1); HybridFunc(function(str) { if(str == “handsome guy”) alert(“”); }, {age : 20, name : “musart”); } </script> class MyHybrid { public String aFuncJobWithId(final String strId, final int time) { Thread thread = new Thread(new Runnable() { public void run() { try { Thread.sleep(time*1000); mWebView.loadUrl(“javascript:CbMgr.fireCbFunc(”” +strId+ “”, ” +time+ ”)”); } catch (InterruptedException e) { e.printStackTrace(); } } }); thread.start(); } }
  • 38. Simple Hybrid App. • If you draw 10 dots, get results from Java.
  • 39. Simple Hybird App. <!DOCTYPE html> <head> <script> /* MyHybrid.js */ function HybridFunc(action, cb, arg) { CbMgr.callCbFunc(action, cb, arg); } var CbMgr = {}; CbMgr.cbId = 0; CbMgr.cbs = {}; CbMgr.callCbFunc = function(action, cb, arg) { var id = "CbMgr" + CbMgr.cbId++; if(!CbMgr.cbs[id]) { CbMgr.cbs[id] = cb; MyHybrid.HybridFunc(action, id, arg); } }; CbMgr.fireCbFunc = function(id, args) { if(CbMgr.cbs[id]) { CbMgr.cbs[id](args); delete CbMgr.cbs[id]; } } </script> ... </head> <body> ... </body> </html>
  • 40. Simple Hybird App. <script> function startDotGame() { var canvas = document.getElementById("canvas1"); ctx = canvas.getContext("2d"); canvas.addEventListener("touchstart", function(event) { ctx.beginPath(); ctx.lineWidth = 10; ctx.moveTo(event.touches[0].pageX, event.touches[0].pageY); ctx.lineTo(event.touches[0].pageX+1, event.touches[0].pageY+1); ctx.stroke(); }); canvas.addEventListener("touchmove", function(event) {}); canvas.addEventListener("touchend", function(event) { ctx.stroke(); ctx.closePath(); ctx.save(); HybridFunc("addDot", function() {}); }); HybridFunc("startDot", function(value) { ctx.beginPath(); ctx.fillText(value, 50, 50); ctx.stroke(); ctx.closePath(); ctx.save(); }); document.getElementById('btn').value = "stop"; } </script>
  • 41. Simple Hybird App. <!DOCTYPE html> <head> ... </head> <body> <canvas id="canvas1" width=300 height=300 style="position: relative; border: 1px solid #000;"></canvas> <input id="btn" type='button' onclick='startDotGame()' value='start'/> </body> </html>
  • 42. Simple Hybird App. package com.HybridApp; import android.app.Activity; import android.os.Bundle; import android.view.ViewGroup.LayoutParams; import android.webkit.WebChromeClient; import android.webkit.WebView; import android.widget.LinearLayout; import com.HybridApp.R; public class HybridAppActivity extends Activity { /** Called when the activity is first created. */ private WebView mWebView = null; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); //mWebView = (WebView) findViewById(R.id.webView); mWebView = new WebView(this); mWebView.setLayoutParams(new LinearLayout.LayoutParams( LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT)); setContentView(mWebView); mWebView.loadUrl("file:///android_asset/www/index2.html"); mWebView.getSettings().setJavaScriptEnabled(true); mWebView.addJavascriptInterface(new MyHybrid(), "MyHybrid"); } ... }
  • 43. Simple Hybird App. class MyHybrid { public int dotNum = 0; public void addDot(final String cbId, final String arg) { dotNum++; } public void startDot(final String cbId, final String arg) { dotNum = 0; final Thread thread = new Thread(new Runnable() { public void run() { while(true) { if(dotNum == 10) { mWebView.loadUrl("javascript:CbMgr.fireCbFunc("" + cbId + "", "finish1")"); break; } else { try { Thread.sleep(500); } catch (InterruptedException e) {} } } }}); thread.start(); } public void HybridFunc(final String strFunc, final String cbId, final String arg) { if("addDot".equals(strFunc)) { addDot(cbId, arg); } else if("startDot".equals(strFunc)) { startDot(cbId, arg); } } }
  • 44. Thank you @musart all source codes are in github. https://github.com/musart/HybridApplication

Editor's Notes

  1. \n
  2. \n
  3. \n
  4. \n
  5. \n
  6. \n
  7. \n
  8. \n
  9. \n
  10. \n
  11. \n
  12. \n
  13. \n
  14. \n
  15. \n
  16. \n
  17. \n
  18. \n
  19. \n
  20. \n
  21. \n
  22. \n
  23. \n
  24. \n
  25. \n
  26. \n
  27. \n
  28. \n
  29. \n
  30. \n
  31. \n
  32. \n