Sp/issue102

README.md

@@ -268,7 +268,16 @@ to the client web browser when you're looking for a small subset of messages.  F
 
 ### 5. Define Views
 
-Views are the last step putting all of the pieces together.  Views let you configure a Topic to consume from, configure which Message Formats the Topic uses, and optionally apply any Filters.
+Views let you configure a Topic to consume from, configure which Message Formats the Topic uses, and optionally apply any Filters.
+
+### 6. Define Producers
+
+Producers let you write messages onto Kafka. With the limitation of one Producer per topic, you add the fully qualified class name of the object that will be represented by the message, and individually add field names that are remembered by the producer for easy message generation.
+![Producer Configuration Screenshot](images/webproducer.PNG)
+
+Upon sending a message, the Producer does no data validation and the consumer is responsible for affirming proper object shape. 
+![Producer Send Message Screenshot](images/webproducer-sendmessage.PNG)
+
 
 ## Writing Custom Deserializers
 

kafka-webview-ui/pom.xml

@@ -9,7 +9,7 @@
     </parent>
     <modelVersion>4.0.0</modelVersion>
     <artifactId>kafka-webview-ui</artifactId>
-    <version>2.5.0</version>
+    <version>2.7.1</version>
 
     <!-- Module Description and Ownership -->
     <name>Kafka WebView UI</name>
@@ -259,6 +259,13 @@
             <version>0.7</version>
             <scope>test</scope>
         </dependency>
+
+<!--        For Kafka things-->
+        <dependency>
+            <groupId>org.springframework.kafka</groupId>
+            <artifactId>spring-kafka</artifactId>
+        </dependency>
+
     </dependencies>
 
     <build>

kafka-webview-ui/src/main/frontend/js/app.js

@@ -364,6 +364,20 @@ var ApiClient = {
             }
         });
     },
+    submitKafkaMessage: function(producerId, messageRequest, callback){
+        jQuery.ajax({
+            type: 'POST',
+            url: ApiClient.buildUrl('api/producer/' + producerId + '/send-message'),
+            data: messageRequest,
+            dataType: 'json',
+            headers: ApiClient.getCsrfHeader(),
+            success: callback,
+            error: ApiClient.defaultErrorHandler,
+            beforeSend: function(xhr) {
+                xhr.setRequestHeader('Content-type', 'application/json; charset=utf-8');
+            }
+        });
+    },
     defaultErrorHandler: function(jqXHR, textStatus, errorThrown) {
         // convert response to json
         var response = jQuery.parseJSON(jqXHR.responseText);