Click here to Skip to main content
Click here to Skip to main content
Go to top

Newgen: Making a simple HTML Widget

, 9 Aug 2012
Rate this:
Please Sign up or sign in to vote.
Making a simple HTML Widget.

Intro ->

Before going to development, I'll start with the overview of Newgen HTML Widgets System.
Newgen uses the virtual web server created using TcpListener. This server is created by Newgen at runtime at any free port available that time. <Newgen>\Widgets is the base directory for this server.
The HTML Widgets, in simple, are just HTML files run by the Webkit. There are some reasons, for why I wasted time on creating the server. I'll not tell that.

Basic requirements and information ->

There are several javascript functions that you can use to do certain tasks, like loading and saving data, showing message, etc... More details. For a widget, to be identified by Newgen, the widget definition must be present in the same directory as widget files. The definition file is Widget.Definition.xml and below is template for it.

<?xml version="1.0" encoding="utf-8"?>
<NewgenHTMLWidget>
  <!-- Name or Title of this HTML Widget -->
  <Name>My HTML Widget</Name>
  
  <!-- Icon of this HTML Widget NOTE: Use only valid image files -->
  <Icon>Icon.png</Icon>
  
  <!-- Number of Columns occupied by this Widget on TilesScreen -->
  <CSpan>2</CSpan>
  
  <!-- Relative path to the main content view (Tile) NOTE: Use HTML file only -->
  <Content>Tile.html</Content>
  
  <!-- Relative path to the main content view (Tile) image when content cannot be loaded -->
  <Content.FallbackImage>Content.FallbackImage.png</Content.FallbackImage>
 
  <!-- Relative path to the hub view (Hub) [Delete if not using] -->
  <Hub>Hub.html</Hub>
 

  <!-- Relative path to the options hub (Settings Hub) [Delete if not using] -->
  <Options>Options.html</Options>
</NewgenHTMLWidget>

Their is also a widget sample, you can get it from here. Also download Widget Packing Tool (You'll need it, if you want your widget in Newgen Store).

First step: Preparing ->

Ok, let's start. Follow the process.

  1. Create a folder <Newgen>\Widgets\<Widget Name>.
  2. Then, create a file in above folder as Widget.Definition.xml with the given template above. NOTE: The folder name and widget name must be same.
  3. Then open Photoshop or any Image editor and create a logo (Icon) and a default preview of your widget's Tile (Content.FallbackImage) for your widget in .png format.
  4. Fill out and correct the file names in Widget.Definition.xml.
  5. Now, create a file Tile.html in folder at step 1. You can use any name for file, just make sure that you correct it in definition.
  6. You have made a widget for Newgen, which'll show only a white space. Now, run Newgen and test it.

License

This article, along with any associated source code and files, is licensed under The GNU General Public License (GPLv3)

Share

About the Author


Comments and Discussions

 
Questionhow PinmemberMember 949016829-Jan-13 3:59 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web02 | 2.8.140916.1 | Last Updated 9 Aug 2012
Article Copyright 2012 by Code0987
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid