This document provides an overview of widgets for the S60 platform, including definitions of widgets and the S60 Web Runtime, widget building blocks, the development and deployment process, and recommended development tools. Key points covered include what widgets are, the different versions of the Web Runtime, common widget file types like the manifest and HTML files, using the DOM and JavaScript to add interactivity, and testing widgets using emulator tools.
DotNetNuke is an open source content management framework built on ASP.NET. It allows users to easily create and manage dynamic websites without coding knowledge through features like customizable modules and templates. DotNetNuke provides a single interface to integrate multiple applications within an organization on one portal. It offers benefits like easy administration, customization, security, and a large support community.
The document provides information about DotNetNuke, an open-source web application framework for building websites, intranets, and other online applications. Some key points:
- DotNetNuke was created in 2002 and allows for dynamic content and interactive features. It is built on Microsoft's ASP.NET platform.
- DotNetNuke uses a portal architecture where pages organize content and modules add interactive elements. It has built-in features like user management, permissions, and search.
- The framework is highly customizable through modules, skins, and other extensions. It also has tools for site administration, file management, and more.
This document provides an introduction and overview of HTML5. It discusses the new features and elements in HTML5, including video/audio, canvas, drag and drop, geolocation, web storage, web workers, and new form elements. It also covers browser support for various HTML5 features and provides examples of how to implement many of the new technologies.
Orion is a set of browser-based components that provide an extensible development platform for editing, navigating, searching, and working with source code management for web developers. The Orion server exposes REST APIs for file system, search, Git, and other services. The Orion client is written in HTML/JavaScript and runs in the browser, focusing on tasks for exploring and leveraging cross-site workflows. Orion uses a plugin architecture where plugins can be installed from any web server to extend Orion's capabilities.
This document provides an overview of the Necto 16 Training on using the Necto SDK and implementing Single Sign-On (SSO). The key points covered are:
- The Necto SDK can be found on the server and used to feed information into Necto through files like novaview.aspx.
- SSO allows Necto to be used within a corporate portal by calling an aspx page from the portal using a URL.
- Microsoft Community 2015 or another debugging tool is needed to edit and debug the aspx page.
- Implementing SSO involves creating an aspx file in the Panorama folder that can be called from a URL and get parameters from
This document provides information on how browsers handle unknown HTML5 elements and the challenges presented, particularly with older versions of Internet Explorer. It discusses how browsers determine default styling and DOM structure for elements, and how Internet Explorer prior to version 9 does not allow styling or recognize elements it does not explicitly support. It presents a solution using JavaScript to dynamically create element nodes, tricking Internet Explorer into supporting unknown elements. It also shows a conditional comment method to apply this fix only for older IE versions.
The slides from my presentation at the Sitecore User Group Conference in The Netherlands on June 12th, 2015.
Demo source code is available at https://github.com/ParTech/SugCon2015
DotNetNuke is an open source content management framework built on ASP.NET. It allows users to easily create and manage dynamic websites without coding knowledge through features like customizable modules and templates. DotNetNuke provides a single interface to integrate multiple applications within an organization on one portal. It offers benefits like easy administration, customization, security, and a large support community.
The document provides information about DotNetNuke, an open-source web application framework for building websites, intranets, and other online applications. Some key points:
- DotNetNuke was created in 2002 and allows for dynamic content and interactive features. It is built on Microsoft's ASP.NET platform.
- DotNetNuke uses a portal architecture where pages organize content and modules add interactive elements. It has built-in features like user management, permissions, and search.
- The framework is highly customizable through modules, skins, and other extensions. It also has tools for site administration, file management, and more.
This document provides an introduction and overview of HTML5. It discusses the new features and elements in HTML5, including video/audio, canvas, drag and drop, geolocation, web storage, web workers, and new form elements. It also covers browser support for various HTML5 features and provides examples of how to implement many of the new technologies.
Orion is a set of browser-based components that provide an extensible development platform for editing, navigating, searching, and working with source code management for web developers. The Orion server exposes REST APIs for file system, search, Git, and other services. The Orion client is written in HTML/JavaScript and runs in the browser, focusing on tasks for exploring and leveraging cross-site workflows. Orion uses a plugin architecture where plugins can be installed from any web server to extend Orion's capabilities.
This document provides an overview of the Necto 16 Training on using the Necto SDK and implementing Single Sign-On (SSO). The key points covered are:
- The Necto SDK can be found on the server and used to feed information into Necto through files like novaview.aspx.
- SSO allows Necto to be used within a corporate portal by calling an aspx page from the portal using a URL.
- Microsoft Community 2015 or another debugging tool is needed to edit and debug the aspx page.
- Implementing SSO involves creating an aspx file in the Panorama folder that can be called from a URL and get parameters from
This document provides information on how browsers handle unknown HTML5 elements and the challenges presented, particularly with older versions of Internet Explorer. It discusses how browsers determine default styling and DOM structure for elements, and how Internet Explorer prior to version 9 does not allow styling or recognize elements it does not explicitly support. It presents a solution using JavaScript to dynamically create element nodes, tricking Internet Explorer into supporting unknown elements. It also shows a conditional comment method to apply this fix only for older IE versions.
The slides from my presentation at the Sitecore User Group Conference in The Netherlands on June 12th, 2015.
Demo source code is available at https://github.com/ParTech/SugCon2015
This document provides an overview of widgets for the S60 platform, including:
- What widgets are and the S60 Web Runtime environment
- How to develop widgets using HTML, CSS, JavaScript and accessing device APIs
- The widget development process including deployment and testing tools
- Examples of common widget components and using the Nokia UI framework
Developing Applications with Nokia WRTPrashanth GN
The document discusses Nokia Web Runtime (WRT) and developing widgets for Nokia S60 devices. It provides an introduction to WRT, describes what widgets are and their key components like HTML, CSS and JavaScript. It also covers widget packaging, installation and various WRT JavaScript APIs for accessing device capabilities like location, contacts, calendar, media and more.
This document provides an overview of the Nokia Web Runtime (WRT) widget platform. It defines widgets as lightweight mobile applications that give users easy access to web-based information and services. The key components of a WRT widget are described, including the mandatory info.plist and HTML files, optional CSS and JavaScript, and how widgets can access platform services. Guidelines are also provided for creating home screen widgets and tools for widget development.
This document provides an overview of the Nokia Web Runtime (WRT) widget platform. It defines widgets as lightweight mobile applications that give users easy access to web-based information and services. The key components of a WRT widget are described, including the mandatory info.plist and HTML files, optional CSS and JavaScript, and how widgets can access platform services. Guidelines are also provided for creating home screen widgets and tools for widget development.
This document provides an overview of the Nokia Web Runtime (WRT) widget platform. It defines widgets as lightweight mobile applications that give users easy access to web-based information and services. The key components of a WRT widget are described, including the mandatory info.plist and HTML files, optional CSS and JavaScript, and how widgets can access platform services. Guidelines are also provided for creating home screen widgets and tools for widget development.
This document provides an overview of the Nokia Web Runtime (WRT) widget platform. It defines widgets as lightweight mobile applications that give users easy access to web-based information and services. The key components of a WRT widget are described, including the mandatory info.plist and HTML files, optional CSS and JavaScript, and how widgets can access platform services. Guidelines are also provided for creating home screen widgets and tools for widget development.
This document provides an overview of WRT widgets, including:
1. WRT widgets allow developing applications using web technologies like HTML, CSS, and JavaScript that can be deployed to and integrated with S60 devices.
2. Key components of a WRT widget include an info.plist file, HTML file, supporting files like images and JavaScript, and a widget installation file.
3. The document outlines tools, documentation, and tutorials available for developing WRT widgets and testing them on S60 devices or emulators.
This document discusses using Sencha Ext JS, a JavaScript framework, to improve the graphical user interface (GUI) of a Drupal website. It describes common setups where Ext JS provides the frontend GUI and Drupal serves as the backend supplying content. The document also introduces the Ext Module, a custom module that facilitates integrating Ext JS and Drupal using a Model-View-Controller architecture and RESTful services to exchange data.
The document discusses Nokia's Web Runtime platform which allows developers to create lightweight mobile applications called widgets using web technologies like HTML, CSS, and JavaScript that can access platform services and be distributed through Nokia's Ovi Store, highlighting how widgets provide optimized mobile experiences for web content and how tools like the Ovi App Wizard and Web Runtime plug-ins make developing widgets simple.
Miha Lesjak Mobilizing The Web with Web RuntimeNokiaAppForum
The document discusses how to develop mobile applications using Nokia Web Runtime (WRT) widgets, which allow reusing existing web development knowledge. WRT widgets are lightweight mobile applications that provide customized access to web resources. They can be created using HTML, CSS, JavaScript and accessed like native applications. The document outlines key aspects of developing WRT widgets like info.plist, HTML, CSS, JavaScript, utilizing platform services and home screen integration. It emphasizes that WRT is a viable option for mobile development as it offers performance, a shallow learning curve and ability to reuse tools and processes from web development.
Webcenter Sites Google Gadget Development TechniquesJohn Brunswick
Presentation from Collaborate 13 outlining basics of development techniques for Gadget development within WebCenter Sites. View additional background around these presentation materials at http://www.johnbrunswick.com/2012/10/webcenter-sites-gadget-development-concepts-quickstart/
Mobile applications Development - Lecture 10
HTML5 Refresher
This presentation has been developed in the context of the Mobile Applications Development course at the Computer Science Department of the University of L’Aquila (Italy).
http://www.di.univaq.it/malavolta
Sencha Tooling and Framework brings enterprise-grade development tools to Ext JS including visual application builders, theme designers, and debugging tools to help developers quickly build performant and beautiful applications. The document demonstrates using Sencha Architect to visually build a news application, and highlights new features in Architect 4.1 like support for premium components, grid enhancements, and importing themes from Themer. Sencha's tools help developers improve productivity and adopt Ext JS frameworks easily.
GateIn - The Solution for Managing and Building Enterprise Web AppsWesley Hales
The document discusses portal and portlet concepts and how the JBoss GateIn portal and JBoss Portlet Bridge can help build and manage enterprise web applications. Key points include how a portal provides a unified access to web apps, benefits of using a portal over building one in-house, and how the portlet bridge allows using existing web frameworks and hides portlet APIs. It also outlines features of GateIn like customization, templates, and extensions.
InduSoft Web Studio 8.0 + SP1 + Patch One ReviewAVEVA
This month’s webinar will offer a review of our newest Patch for InduSoft Web Studio! Please join us this month to learn more about what’s included in InduSoft Web Studio 8.0 + SP1 + P1! In this patch we have added several major improvements to the InduSoft HMI/SCADA software, as well as solving some minor issues from previous versions.
An introduction to Web Components describes why we should use web components for Web App development and how Polymer Javascript library from Google can help build web components faster.
Enterprise Griffon provides an overview of the Griffon framework, which is a desktop application framework for Java that uses plugins and addons to extend its capabilities, and it discusses Griffon's plugin architecture, MDI support, UI toolkits like SwingXBuilder and MacWidgetsBuilder, notifications, database integration, printing, and deployment options.
This document contains a summary of Prashant Patel's work experience and qualifications. He has over 9 years of experience developing web and desktop applications using technologies like C#, ASP.NET, SQL Server and the .NET framework. Some of the projects he has worked on include developing workflow management systems for Xerox and a new account management system for TD Bank. He also has experience leading a team to develop an intelligent document processing platform.
This document discusses how to build web applications using web components. It introduces HTML5 web components standards including templates, imports, shadow DOM, and custom elements. Templates allow cloning document fragments, imports load additional HTML documents, shadow DOM encapsulates DOM parts, and custom elements enable extending or creating custom HTML elements. The document provides examples and demos of each standard and argues that web components enable encapsulation, separation of concerns, and element portability, advancing the capabilities of the web.
This document provides an overview of widgets for the S60 platform, including:
- What widgets are and the S60 Web Runtime environment
- How to develop widgets using HTML, CSS, JavaScript and accessing device APIs
- The widget development process including deployment and testing tools
- Examples of common widget components and using the Nokia UI framework
Developing Applications with Nokia WRTPrashanth GN
The document discusses Nokia Web Runtime (WRT) and developing widgets for Nokia S60 devices. It provides an introduction to WRT, describes what widgets are and their key components like HTML, CSS and JavaScript. It also covers widget packaging, installation and various WRT JavaScript APIs for accessing device capabilities like location, contacts, calendar, media and more.
This document provides an overview of the Nokia Web Runtime (WRT) widget platform. It defines widgets as lightweight mobile applications that give users easy access to web-based information and services. The key components of a WRT widget are described, including the mandatory info.plist and HTML files, optional CSS and JavaScript, and how widgets can access platform services. Guidelines are also provided for creating home screen widgets and tools for widget development.
This document provides an overview of the Nokia Web Runtime (WRT) widget platform. It defines widgets as lightweight mobile applications that give users easy access to web-based information and services. The key components of a WRT widget are described, including the mandatory info.plist and HTML files, optional CSS and JavaScript, and how widgets can access platform services. Guidelines are also provided for creating home screen widgets and tools for widget development.
This document provides an overview of the Nokia Web Runtime (WRT) widget platform. It defines widgets as lightweight mobile applications that give users easy access to web-based information and services. The key components of a WRT widget are described, including the mandatory info.plist and HTML files, optional CSS and JavaScript, and how widgets can access platform services. Guidelines are also provided for creating home screen widgets and tools for widget development.
This document provides an overview of the Nokia Web Runtime (WRT) widget platform. It defines widgets as lightweight mobile applications that give users easy access to web-based information and services. The key components of a WRT widget are described, including the mandatory info.plist and HTML files, optional CSS and JavaScript, and how widgets can access platform services. Guidelines are also provided for creating home screen widgets and tools for widget development.
This document provides an overview of WRT widgets, including:
1. WRT widgets allow developing applications using web technologies like HTML, CSS, and JavaScript that can be deployed to and integrated with S60 devices.
2. Key components of a WRT widget include an info.plist file, HTML file, supporting files like images and JavaScript, and a widget installation file.
3. The document outlines tools, documentation, and tutorials available for developing WRT widgets and testing them on S60 devices or emulators.
This document discusses using Sencha Ext JS, a JavaScript framework, to improve the graphical user interface (GUI) of a Drupal website. It describes common setups where Ext JS provides the frontend GUI and Drupal serves as the backend supplying content. The document also introduces the Ext Module, a custom module that facilitates integrating Ext JS and Drupal using a Model-View-Controller architecture and RESTful services to exchange data.
The document discusses Nokia's Web Runtime platform which allows developers to create lightweight mobile applications called widgets using web technologies like HTML, CSS, and JavaScript that can access platform services and be distributed through Nokia's Ovi Store, highlighting how widgets provide optimized mobile experiences for web content and how tools like the Ovi App Wizard and Web Runtime plug-ins make developing widgets simple.
Miha Lesjak Mobilizing The Web with Web RuntimeNokiaAppForum
The document discusses how to develop mobile applications using Nokia Web Runtime (WRT) widgets, which allow reusing existing web development knowledge. WRT widgets are lightweight mobile applications that provide customized access to web resources. They can be created using HTML, CSS, JavaScript and accessed like native applications. The document outlines key aspects of developing WRT widgets like info.plist, HTML, CSS, JavaScript, utilizing platform services and home screen integration. It emphasizes that WRT is a viable option for mobile development as it offers performance, a shallow learning curve and ability to reuse tools and processes from web development.
Webcenter Sites Google Gadget Development TechniquesJohn Brunswick
Presentation from Collaborate 13 outlining basics of development techniques for Gadget development within WebCenter Sites. View additional background around these presentation materials at http://www.johnbrunswick.com/2012/10/webcenter-sites-gadget-development-concepts-quickstart/
Mobile applications Development - Lecture 10
HTML5 Refresher
This presentation has been developed in the context of the Mobile Applications Development course at the Computer Science Department of the University of L’Aquila (Italy).
http://www.di.univaq.it/malavolta
Sencha Tooling and Framework brings enterprise-grade development tools to Ext JS including visual application builders, theme designers, and debugging tools to help developers quickly build performant and beautiful applications. The document demonstrates using Sencha Architect to visually build a news application, and highlights new features in Architect 4.1 like support for premium components, grid enhancements, and importing themes from Themer. Sencha's tools help developers improve productivity and adopt Ext JS frameworks easily.
GateIn - The Solution for Managing and Building Enterprise Web AppsWesley Hales
The document discusses portal and portlet concepts and how the JBoss GateIn portal and JBoss Portlet Bridge can help build and manage enterprise web applications. Key points include how a portal provides a unified access to web apps, benefits of using a portal over building one in-house, and how the portlet bridge allows using existing web frameworks and hides portlet APIs. It also outlines features of GateIn like customization, templates, and extensions.
InduSoft Web Studio 8.0 + SP1 + Patch One ReviewAVEVA
This month’s webinar will offer a review of our newest Patch for InduSoft Web Studio! Please join us this month to learn more about what’s included in InduSoft Web Studio 8.0 + SP1 + P1! In this patch we have added several major improvements to the InduSoft HMI/SCADA software, as well as solving some minor issues from previous versions.
An introduction to Web Components describes why we should use web components for Web App development and how Polymer Javascript library from Google can help build web components faster.
Enterprise Griffon provides an overview of the Griffon framework, which is a desktop application framework for Java that uses plugins and addons to extend its capabilities, and it discusses Griffon's plugin architecture, MDI support, UI toolkits like SwingXBuilder and MacWidgetsBuilder, notifications, database integration, printing, and deployment options.
This document contains a summary of Prashant Patel's work experience and qualifications. He has over 9 years of experience developing web and desktop applications using technologies like C#, ASP.NET, SQL Server and the .NET framework. Some of the projects he has worked on include developing workflow management systems for Xerox and a new account management system for TD Bank. He also has experience leading a team to develop an intelligent document processing platform.
This document discusses how to build web applications using web components. It introduces HTML5 web components standards including templates, imports, shadow DOM, and custom elements. Templates allow cloning document fragments, imports load additional HTML documents, shadow DOM encapsulates DOM parts, and custom elements enable extending or creating custom HTML elements. The document provides examples and demos of each standard and argues that web components enable encapsulation, separation of concerns, and element portability, advancing the capabilities of the web.
Similar to Treinamento S60 WRT - CETELI UFAM INDT (20)
5. WRT Widget Definition
• Standalone Web applications running without a browser application;
• Behaviour defined using JavaScript™–no compilation or linking needed;
• Consists of a few files defining appearance (icon), layout, and behavior;
• Accesses a URL like a normal Web application to get data from the Web
serve;
5
6. S60 Web Runtime
• A library providing APIs for widget developers
• Menu creation
• URL access
• Data download from URL
• Access to some device properties
• Access to several S60 Platform Services (since WRT 1.1)
• Based on open-source Web technologies
• Empowered by Web Browser for S60
• Several widgets can be executed at the same time
• Due to physical limitations of the screen, only a single widget is on the
foreground
6
7. WRT versions and device support
• WRT 1.0
• Introduced in S60 3rd Edition, Feature Pack 2 SDK
• Available as an update to selected S60 3rd Edition, Feature Pack1 devices
• WRT 1.1
• Introduced in S60 5th Edition SDK
• Adds support for S60 Platform Services through JavaScript Service APIs
• Widgets created for WRT 1.0 run normally with WRT 1.1
7
14. Main HTML file
• There Name must match the name defined in info.plist properties
• Contains information for structuring a widget
• Define the document inside <html> tags
• External style and code files are referenced inside <style> and <script>
tags in the head part of the HTML file
• Body part defines widget’s UI structure
14
15. Main HTML file example
<!DOCTYPE html>
<html>
<head>
<link rel="StyleSheet" href="styles/general.css" type="text/css" />
<script type="text/javascript" src="scripts/mywidget.js" />
<title>My widget</title>
</head>
<body>
</body>
</html>
15
16. Widget UI structure
• Define inside HTML <body> tag
• Some useful structures
• Headings <h1>, <h2>
• Views <div id=“View1”>
• Labels <label>
• Input text <input type=“text”>
• Input button <input type=“button”>
• Paragraph text <p>
• Images <img>
• List items <li>
• Tags may be empty and dynamically generated in JavaScript programming language
• <img id=“image”src=“”/>
• Tags may be associated with JavaScript functions
• <li onclick=“excuteFunction();”>label</li>
16
17. Example UI structure
<html>
<head>
<script type="text/javascript">
function myfunc() {
var p = document.getElementById("personList");
var li = document.createElement('li');
li.innerHTML = document.getElementById("inputX").value;
p.appendChild(li);
}
</script>
</head>
<body>
<h1>My widget</h1>
<div id="bodyContent">
<p><b>Some paragraph text</b></p>
<label for="inputX">Enter your name:</label>
<input type="text" id="inputX" size="10"></input>
<input type="button" name="check" value="Check" onClick=myfunc()></input>
<ul id="personList">
<li>Allan</li>
</ul>
</div>
</body>
</html>
17
18. CSS files
• Web Without proper style and layout, widget looks quite boring
• Controls style and layout of widget contents
• Recommended: Keep the style information separated from the markup
elements (recommendation)
• If CSS file is not provided, style information can be embedded within the
HTML file
• Define the style for UI component
• Body background image
• Heading text font, alignment, colour
• List style
• Visibility (for example, in case of several views, all other except the default
view are hidden)
• Set display property to none
18
20. UI in mobile devices
• Screen sizes are smaller than those available on desktop devices
• Screen sizes vary between devices
• Prefer relative units in CSS to specify the characteristics of screen elements
• Some devices support screen rotation
• Some devices are touch-enabled
• Widget can have different CSS files for touch and non-touch devices
• UI for touch interaction can provide clickable HTML elements large
enough to select with a finger
20
21. DOM – Document Object Model
http://www.aharef.info/static/htmlgraph/?url=http://www.indt.org.br
21
22. DOM – Document Object Model
• Allows dynamic access of HTML document objects in JavaScript
• Object properties such as visibility (display) can be changed
• Objects are identified by using IDs given in the HTML file
• Get access to an object
document.getElementById(“bodyContent”)
• Change style properties (visibility in this case)
document.getElementById(“bodyContent”).style.display= “none”;
• Define image file dynamically
document.getElementById(“image”).setAttribute('src', “image1.jpg”);
22
23. JavaScript
• External Implements widget behaviour
• UI interactions
• Communication functionality (URL access, etc.)
• Dynamic construction of UI elements
• JavaScript functions are associated with tags
• Functions are assigned with certain attributes (for example, onClick)
causing the function to be called
<input type="button" name="check" value="Check" onClick=myfunc()></input>
• When the button is clicked, myfunc() function will be called.
• Based on the function result, DOM may be used to change HTML object
properties
23
24. Icons
• Widget may have an icon in the Application Menu and any other icons
needed
• Application icon is named as icon.png
• Recommended size for application icon is 88x88 pixels
• Icon must be a PNG (Portable Networking Graphics) format
• Application icon is not needed, in which case the widget icon is a default
S60 application icon
24
28. Deployment process in the S60 emulator
• Package widget source code files to a .zip file
• Change the file name extension to .wgz
• Run the emulator
• Open the package file from emulator’s File>Open
28
29. Summary
• Widgets are Web applications running without a browser application
• Development is fast and relatively easy, because no compilation or
linking is needed
• Developer must know at least the basics of XML, HTML, JavaScript, DOM,
and CSS
• Widgets allows you to easily develop and deploy nice-looking
applications
29