sorted by: recent | see : popular

Content Tagged with front + toolkit

As I say in this podcast interview, I got an early look at 280 Slides the application that launched yesterday to much acclaim. People are calling it "Keynote on the Web", which the team finds very humbling, and hope that one day they have all of the great features (and more!).

As you can hear from the interview I sit down with Ross Boucher, Tom Robinson and Francisco Tolmasky to discuss their new application and how they built it.

I really like these guys. A couple of them worked on cool products at Apple, and it turns out that they started the language and runtime work back at school.

Objective-J is the language that takes JavaScript and makes it Objective (as Obj-C did to C). Lots of square brackets. When the browser gets served .j files, it preprocesses them on the fly. This means that you can do things like, use standard JavaScript in places.

Cappuccino is the port of the Cocoa framework.

The guys talk a little about the toolchain an why they did this, and even how it enables future cool things such as generating a native Mac application from the same code.

We also get into the fun cross browser issues that they work around, and how they are abstracting developers high up, so you don't have to deal with these issues.

Finally, I was excited to hear that they will be open sourcing the code at objective-j.org shortly (may not be there yet). They are going through the usual issues of choosing a license (Apache2 please?), a source control system (Subversion vs. Git), and documenting the thing ;)

We have the audio directly available, or you can subscribe to the podcast.

The team was very interested in learning what JavaScript developers think (They have heard from Objective-C folk who love it), so let them know in the comments!

Appcelerator is a fairly new open source toolkit on the block that is trying to be an Open Web RIA to compete with Flex and co. with high profile folks such as Marc Fleury as advisors.

Nolan Wright, CTO, has written a piece for syscon entitled The Next Web Development Episode Is RIA + SOA. In the article Nolan talks about Appcelerator and how it fits into his world view:

1. Design the "look" of the application

This is the general appearance of an application. It includes things like: color, fonts, graphics, and a general page layout. Common toolsets: HTML, CSS and images

2. Integrate Widgets

Widgets encapsulate a set of common capabilities within a single component. They typically contain both “look and feel” as well as a set of pre-defined dynamic behaviors. They are a fundamental building block of an RIA.
Common toolsets: ExtJS, Dojo, Yahoo YUI and several other small widget projects

3. Add dynamic behavior to the user interface

Creating dynamic behavior in the user interface involves two things:

• Event handling
• Document Object Model (DOM) Manipulation

Event handling is the ability to know when a particular event occurs (e.g., a user clicks a button or a service response is received). DOM Manipulation allows you to dynamically change the user interface based on the receipt of an event. Common toolsets: Javascript libraries like JQuery, Prototype, and Scriptaculous

4. Consume services

Consuming backend services is a key capability of an RIA. It enables the creation of single page user interfaces that exchange application data with services. It also enables a clean separation between the user interface and the service tier. The most common method for interacting with services is Ajax. Common toolsets: Javascript libraries like JQuery and Prototype

5. Create services

Services provide an interface to data and application business logic. Common toolsets: There are several frameworks available for creating services in your programming language of choice.

To illustrate the DSL that Appcelerator uses, Nolan has some comparisons between jQuery code such as:

And the meta language:

We have been talking about the world of SOA coming to fruition for quite some time. TIBCO GI was talking about this several years ago. Is 2008 going to be the year?

The Pownce team has been working hard to get their API up to speed and have gotten the API to a point where some cool applications can be built from it. Yesterday, they announced v2.0 of the Pownce API:

We’re sorry it took so long for us to release a complete API. We’ve taken great care to provide the best experience for developers and we hope the wait was worth it. Going forward, we’ll be working hard to keep Pownce the best social messaging application out there.

Well worth the wait, new features include:

• Ability to post notes
• Ability to post messages, links, files, events and replies
• Ability to fetch lists of private and friends-only notes.
• Integration of OAuth token-based web authentication.

This should open the doors for building new custom Pownce clients and applications similar to what's been done with Twitter.

In addition, the Pownce team has created a new application directory to showcase applications built by developers.

Documentation for Pownce API v2.0 can be found here: http://pownce.pbwiki.com/API+Documentation2-0

WaveMaker has just released a new version of its open source Visual Ajax Studio v3.1.1. It is similar to TIBCO GI, but built on top of Dojo with JavaScript output that is very terse and even looks like something you may have written (which is rare indeed for a tool).

Studio lets users create database- and web service-driven Ajax web applications using a wysiwyg visual designer. WaveMaker helps users create simple applications without any scripting knowledge, while developers can easily add Javascript, HTML, CSS, and Java code to create complex application behavior.

Studio is a web-based application that leverages the Dojo Toolkit to create pages containing widgets and Dojo Dijits. Users drag and drop to create complex page layouts containing the Dojo grid, Dijit based forms, Google Gadgets, and a variety of other included widgets. Developers can even author their own widgets and include them directly in the designer.

A Java-based backend provides access to database, web, and user created services. Applications are deployed in a standard WAR container for use on a variety of Java application servers. For ease of use, Tomcat is included with the installer. It's also possible for Ajax developers to use their own backend with Studio generated web pages.

Wavemaker Visual Ajax Studio is available under the open source AGPL version 3 license as well as a commercial license. Download Wavemaker Visual Ajax Studio at wavemaker.com.

Mashable.com is best known for their up-to-minute reporting on trendy websites and social networking news. Along with their standard news, they regularly make posts that list out great resources for different web technologies. Well, it looks like Mashable's Sean P. Aune spent the whole weekend on a new post because he's listed out 250+ tools and resources for coding the web.

While many of the sites will certainly be familiar to Ajaxian readers, there's sure to be plenty of new reading material and tools for all to enjoy. I personally had never heard of Load Info - Gif Generator, a site providing Ajax indicators, and I'm sure I'll find even more great sites as I scan all 250 listings.

Included are links for Ajax, CSS, ActionScript and JavaScript tools as well as sites catering to server-side technologies.

Awhile back we discussed Dreamweaver as a potential Ajax IDE.

Here's the press release:

Nitobi"s Complete UI is a powerful set of components that will give Dreamweaver users the ability to present data in an engaging format in a fraction of the time," states Michael Lekse, Vice President of Sales and Services at WebAssist. "Dreamweaver professionals looking to enhance their user interface functionality should turn to Nitobi with confidence."

The easy drag and drop feature for Dreamweaver reflects Nitobi"s philosophy of fast, easy web application development--a key selling point of Complete UI. Complete UI components are designed to be easy to implement and to help create web applications with intuitive and graceful user interfaces. The Complete UI suite includes:

• Grid -- A cross-browser spreadsheet with Excel "copy/paste", LiveScrolling, and more.
• ComboBox -- A drop-down menu with autocomplete functionality, similar to Google Suggest.
• Calendar -- A high-performance calendar picker that can be used with Nitobi Grid or in standalone web applications.
• Callout -- A rich, skinnable tool-tip that prompts users with real-time feedback and helpful instructions as they navigate through an application.
• Fisheye -- A tool bar menu featuring fisheye magnification, similar to Apple OS X tool bar.
• Spotlight -- A tool for creating stylish guided tours of websites and applications.
• Tabstrip -- Folder tabs for navigating to different sections of a web application via Ajax or iFrame requests.
• Tree -- A hierarchical data view, similar to the folder view in Windows Explorer.
• Ajax Toolkit -- A library of fully-documented tools used in Nitobi components that can be re-used in your own applications, or to build your own components.

In addition to Dreamweaver support, Complete UI includes enhancements to Nitobi Grid, including expanding spreadsheet-style rows and even better performance.

What better way to check this out than a set of screencasts?

• Using Grid in Dreamweaver: This is a great look at things.
• Using Calendar in Dreamweaver
• Using ComboBox in Dreamweaver
• Using Tree in Dreamweaver
• Using Spotlight in Dreamweaver
• Using Tabstrip in Dreamweaver
• Using Fisheye in Dreamweaver
• Using Callout in Dreamweaver

What do you think of Dreamweaver now?

ActiveState have announced the launch of The Open Komodo Project which will offer an open source code base from which to develop integrated development environments.

The Open Komodo Project, based on the award-winning Komodo IDE, is a new initiative by ActiveState to create an open source platform for building developer environments. The Open Komodo Project will create Firefox-integrated web developer tools that support the open web.

The Open Komodo Project aims to create a full-featured web development tool for client-side web development integrated with Firefox©, Mozilla's free, open source web browser, and based on the award-winning Komodo IDE. This new tool, codenamed Komodo Snapdragon, will be developed in collaboration with the open source community.

Best known for their ActivePerl, Komodo Edit and Komodo IDE development tools, ActiveState wanted to give back to the open source community which has long supported their products and efforts:

Meanwhile, our friends within the Mozilla Community were looking for tools and applications that advocate the open web. Since Komodo is built on the Mozilla platform and ActiveState has had a long-standing relationship with the open source community, making Komodo a part of the technology stack for the open web was an obvious choice, one that benefits both the open source community and ActiveState.

This announcement even got Dojo's Alex Russell all worked up:

Very few of the Web IDE vendors seem to really “get” the web, and along with the folks at Aptana and Panic, the ActiveState bunch have impressed the hell out of me with their constant support of Open Source, deep understanding of why webdev sucks, and what they can do to fix it.

The first technology preview is expected to be ready by early November along with access to a public source repository and the Open Komodo website.

Full information about the project can be found on their project page

InfiView is a mapping development tool that empowers engineers to build infinite-sized Web 2.0 mind maps, network topologies, organization charts, LDAP tools and technical diagrams.

InfiView uses Ajax technology and its own unique dynamic memory management to enable developers to systematically create graphical web applications using any amount of data (from very small all the way to infinite). With InfiView-built web-applications, end-users seamlessly interact (pan, zoom, right-click for actions…) with all types of graphical data - such as network topologies, DNA sequences or genealogy charts - oblivious to the vast amounts of data available.

100% built in Bindows (www.bindows.net), InfiView is built on top of the Bindows framework which is back-end/server agnostic, and provides best-in-industry support for section-508 accessibility compliance, internationalization and localization.

Try the demos and watch the screencasts

YUI 2.2.0 has been released one year after YUI was released into open source.

The major changes are:

• Versioning: 0.12.2 to 2.2.0: The new version syncs up the internal and external release numbers
• Browser History Manager: The YUI Browser History Manager supports all A-grade browsers in managing the back/forward button navigation and bookmarking
• DataTable Control: The DataTable control allows you to present tabular data and allow your user to engage that presentation by modifying/enhancing the data, sorting and searching through it, and adjusting the presentation itself.
• Button Control: Buttons are essential parts of most graphical interfaces, but the visual constraints of buttons in their various form-control implementations (submit buttons, radio buttons, check boxes, etc.) diminish their effectiveness in some applications. The Button Control provides a platform for implementing visually impactful buttons that range from standard click-to-navigate buttons to radio buttons and checkboxes to advanced split-buttons that can operate as both a button and a menu.
• New YAHOO.* properties: such as YAHOO.lang, YAHOO.env, and a YAHOO_config global

Congrats on the new release.

Mootools 1.0 was officially announced to the world.

Big Changes

• All the MooTools Classes use now Events. No, not element events. Class Events. Right, you can add as many onCompletes as you want, onChange(s), onStart(s).. Well, you get the idea. Options starting with “on” become events, so need to change your code on this one.
• All the code, plugins, everything now uses element events. With a completely rewritten event system, its now less memory hungry and a whole lot easier to add events to your elements. You wont find another .onclick in MooTools. We’ve also added the ability to fire an event by hand, or remove all of the events from an element, or all of the events of a certain type (ex. click).
• There are also a number of new “Components”, like Color, to convert colors from HSB to RGB and vice-versa, Hash, to create more flexible javascript objects.
• New plugins have been added, like SmoothScroll, the Scroller, Slider, Assets and Json.Remote, to make Ajax requests directly with Javascript objects. As always, you decide which components to include, so your own version wont be bloated.
• Effects are now more powerful than ever, Fx.Style/Styles/Elements now can include colors and shorthand properties. They also support one value start (the starting value will be computed in real time). You have a div with height = 100 and want to go to 200? as easy as start(200). Fx will read your current style.

Read more

• Official Documentation
• Forums
• Mootorial

Any Mootools users out there? (I know there are). What do you like about it? What made you choose it as your library of choice?

Visual WebGui provides developers with WinForms like GUI components all accessible from the design time framework of Visual Studio .Net. The design time components look, act and interface like they do in their WinForm format since they inherit their object model from the existing WinForms components. Visual WebGui's components become a de-coupled version of the well-known WinForms components allowing for transparent Ajax communication with our patent pending Ajax client. The Visual WebGui client employs javascript, XSL and CSS to deliver application like GUI components that look, feel and behave like their desktop counterparts. Visual WebGui provides extensibility by enabling developers to develop additional GUI components that can be used in both runtime and design time. Furthermore, the platform enables simple interfacing of existing web controls, browser client controls ( e.g. Java applets, Flash, ActiveX) and provides a themes schema enabling extensive customization.

The latest feature is dual-mode, which means that you can deploy to the web, or as a standalone WinForms application.

Andrea Giammarchi has been working on an online JavaScript editor and debugger.

The online editor combines a possible solution for byte family plugins, a global byteplug namespace object, and a portable Editor panel to test quickly JavaScript and/or html pages.

Features

• realtime debug
  It allows developers to write and test code quickly using document.write, alerts or everything else.
  To view or execute a code, just use CTRL+RETURN or click on debug panel (bottom left), result will be displayed on output panel (bottom right)
  using a dedicated iframe virtual space.
• line points

  Just click one line (number on the left) to mark them

• in-place suggest
  Just click CTRL + SPACE or CTRL + SHIFT with Opera to view a kind of intelligent code suggest.
  For example, if You write "Number." on area then use CTRL + SPACE You will see every Number dedicated method plus generic Object methods.
  If You press CTRL + SPACE without a dot before area selection, suggest will show You generic or global functions and statements.
• quick and simple load and save operations

  You can cut and paste some piece of code or directly open a file (txt or js) from Your computer.
  You can save working area content too, choosing a name using CTRL+S or after one click on File, Save As.

• simplified JavaScript 1.7 debug
  You can choose to parse JavaScript as version 1.7 (compatible only with FireFox 2.0 or other advanced browsers) choosing Use JS 1.7 on Settings menu.
• popup mode
  You can launch this Editor inside an 800x600 popup
• jhp mode
  You can choose to try my absolutely nonsense or crazy jhp JavaScript library ... !!!
• x-html mode
  You can write divs, links, or every kind of markup using <script> ... </script> as first piece of area code (with or without JS code inside) to create a page instead of direct script execution

  (i.e. <script type="text/javascript">function myfunc(){alert("Hello World")}</script> <span onclick="myfunc()">test me</span>)

• resizable area
  You can drag the line between working area and debug/output panel to find your favourite size
• extra "code cruncher" implementation
  You can test your code using a "code cruncher" (Crunch - "method" from Extra menu).
  Please view "simple and portable PHP download" point to know more about Crunch methods.
• extra code headers injection
  You can choose to add area code as header. For example, if You need to add a library during debug You can
  load or paste its code inside area and add them as header.
  This code will not be parsed by jsmin and will not be saved as part of script but will be wrote before every other scripts on output panel (every but jhp) then,
  for example, You could add Prototype code and use them as header.

   // extra headers example
  // area content
  function testMe(){
  	document.write(\"useful ?\");
  };
  	
  // now click on header - add code on Extra menu and clean the area
  // after that, write this on area
  testMe();
  	
  // CTRL+RETURN or a click on debug panel and code will be executed
  	

  Please remember that every time You add code precedent code will not be deleted so You need to use header - clear code to remove all precedent headers.

• extra highlight feature
  You can choose to view on output panel highlighted code version.
  Fast version marks strings, numbers and comments while full highlight parse functions and methods too.
  If You have a big source and a regular PC (without monster CPU) You should use fast version.
  To use a copy of highlighted code You could copy and paste output panel and use this dedicated css example file.
• simple and portable PHP download and / or pack panel feature

  You can save your code that should be parsed with cruncher too and then injected into a portable php 3, 4, 5 or greater file that will automatically
  choose the best way to cache with or without gz encoding even on server that doesn't have zlib extension enabled.

  • just area code,
    to create a php file without code cruncher (the safest script VS bandwidth option leaving comments and everything else)
  • Crunch comments,
    to create a php file parsing code with basic code cruncher (removes only comments, this is a good script VS bandwidth option)
  • Crunch newlines,
    to create a php file parsing code with medium code cruncher (removes comments and every repeated space replacing them using a linefeed, this is the best script VS bandwidth option)
  • Crunch full,
    to create a php file parsing code with full cruncher options (remove any linefeed and doesn't take care of potential missing semicolons [can be regressive], this is the best copression option)

  If You want to download your code using code cruncher please enable "Crunch", choose your favourite method and test your code to be sure that it works correctly.
  If You just want to use this Editor to create these kind of compressed files and these are really bigs (no more than 512Kb on upload and 2Mb on download - my personal choice) please don't use File and Open process, just cut and paste your code into area (faster and safer for your browser and PC).
  Please remember that created file size will not be the real size downloaded from clients so don't care about that, just test created php file and have fun :-)

ThinWire 1.2 RC 1 has been released.

ThinWire is an LGPL open source, free for commercial use, development framework that allows you to easily build applications for the web that have responsive, expressive & interactive user interfaces without the complexity of the alternatives. While virtually any web application can be built with ThinWire, when it comes to enterprise applications, the framework excels with its highly interactive and rich user interface components. Use ThinWire to handle the view-layer of your Java EE (J2EE) application and you'll be able to provide an unparalleled user experience, while at the same time completing your project faster than ever.

ThinWire 1.2 RC 1 has too many updates to mention, and they are detailed in the release notes.

The Playground is a dashboard that shows off all of the components.